-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathMemeMaker.html
132 lines (116 loc) · 4.8 KB
/
MemeMaker.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE HTML>
<html>
<head>
<title>MemeMaker-Simple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<style>
#image-container {
display: flex;
}
</style>
</head>
<body>
<div>
<input type="file" id="file"/>
</div>
<div id="image-container">
<canvas width="500" height="500"></canvas>
<div>
<span>Top Line:</span><br/>
<input id="topLineText" type="text"><br/>
<span>Bottom Line:</span><br/>
<input id="bottomLineText" type="text"><br/>
<button id="saveBtn">Save</button>
</div>
</div>
<script>
function textChangeListener( evt ) {
var id = evt.target.id;
var text = evt.target.value;
if( id == "topLineText" ) {
window.topLineText = text;
} else {
window.bottomLineText = text;
}
redrawMeme( window.imageSrc, window.topLineText, window.bottomLineText );
}
function redrawMeme( image, topLine, bottomLine ) {
// Get canvas 2D context
var canvas = document.querySelector( 'canvas' );
var ctx = canvas.getContext( "2d" );
if( image ) {
// Draw image on the canvas
ctx.drawImage( image, 0, 0, canvas.width, canvas.height );
}
if( topLine || bottomLine ) {
// Set common properties for text
ctx.strokeStyle = "black";
ctx.fillStyle = "white";
ctx.font = '30pt Impact';
ctx.textAlign = "center";
ctx.lineWidth = 3;
} else {
return;
}
if( topLine ) {
// Draw top text
ctx.strokeText( topLine, canvas.width/2, 40 );
ctx.fillText( topLine, canvas.width/2, 40 );
}
if( bottomLine ) {
// Draw bottom text
ctx.strokeText( bottomLine, canvas.width/2, canvas.height - 20 );
ctx.fillText( bottomLine, canvas.width/2, canvas.height - 20 );
}
}
function saveFile() {
window.open( document.querySelector( 'canvas' ).toDataURL() );
}
function isValidFile(data) {
var mimeType = getMimeType(data);
var allowedMimeTypes = ["image/jpeg", "image/jpg", "image/png", "image/gif"];
if(allowedMimeTypes.indexOf(mimeType) > -1)
return 1;
return 0;
}
//All data uris are of form - data:mimetype;encoding,data
function getMimeType(data) {
var dataUriContent = data.split(":")[1];
var mimeType = dataUriContent.split(";")[0];
return mimeType;
}
function handleFileSelect( evt ) {
var file = evt.target.files[ 0 ];
var reader = new FileReader();
reader.onload = function( fileObject ) {
var data = fileObject.target.result;
// Create an image object
var image = new Image();
image.onload = function() {
window.imageSrc = this;
redrawMeme( window.imageSrc, null, null );
}
// Set image data to background image if it is a valid image (jpg/gif/png)
if(isValidFile(data)) {
image.src = data;
} else {
alert("Only jpg, png and gif images are allowed");
evt.target.value = "";
}
};
reader.readAsDataURL( file );
}
window.topLineText = "";
window.bottomLineText = "";
var input1 = document.getElementById( 'topLineText' );
var input2 = document.getElementById( 'bottomLineText' );
input1.oninput = textChangeListener;
input2.oninput = textChangeListener;
document.getElementById( 'file' ).addEventListener( 'change', handleFileSelect, false );
document.querySelector( 'button' ).addEventListener( 'click', saveFile, false );
</script>
</body>
</html>