-
-
Save jwill/7482ccf83ccf869f3302 to your computer and use it in GitHub Desktop.
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>MemeMaker-Simple</title> | |
<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 Canvas2DContext | |
var canvas = document.querySelector('canvas'); | |
var ctx = canvas.getContext("2d"); | |
// Your code here | |
} | |
function saveFile() { | |
window.open(document.querySelector('canvas').toDataURL()); | |
} | |
function handleFileSelect(evt) { | |
var canvasWidth = 500; | |
var canvasHeight = 500; | |
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. | |
image.src = data; | |
console.log(fileObject.target.result); | |
}; | |
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> |
To bad there is no such thing as clap( function clapping {
this.clapping = sound.clapping;
});
in JS.
The MemeGenerator worked but couldn't figure out how to make the font italic. I'm using comic san
@xtrimzz
The order that you list the types of font properties in matters.
This tripped me up too.
ctx.font = 'italic 20pt comic-san';
The order of the values is not completely free: font-style, font-variant and font-weight must be defined, if any, before the font-size value. The line-height value must be defined immediately after the font-size, preceded by a mandatory /. Finally the font-family is mandatory and must be the last value defined (inherit value does not work).
I think we must add this code:
ctx.clearRect(0,0,500,500);
Otherwise, the Image will have many repeat images!!!
Hello there
function saveFile no longer works since Chrome removed support for top frame navigation. Explanation is here:
https://stackoverflow.com/questions/45493234/jspdf-not-allowed-to-navigate-top-frame-to-data-url
This worked for me:
function saveFile() {
var url = document.querySelector('canvas').toDataURL();
var iframe = "<iframe width='100%' height='100%' src='" + url + "'></iframe>"
var x = window.open();
x.document.open();
x.document.write(iframe);
x.document.close();
}
I'll have to check this later.
Very nice work! Thank you a lot!
I used your starter code and I make this
http://alextade.me/apps/memes/index.html
Thanks!!!
Note: code results in video no longer match starter code (e.g. bottomLine vs bottomLineText)
function saveFile no longer works since Chrome removed support for top frame navigation. Explanation is here:
https://stackoverflow.com/questions/45493234/jspdf-not-allowed-to-navigate-top-frame-to-data-urlThis worked for me:
function saveFile() {
var url = document.querySelector('canvas').toDataURL();
var iframe = "<iframe width='100%' height='100%' src='" + url + "'></iframe>"
var x = window.open();
x.document.open();
x.document.write(iframe);
x.document.close();
}
Another option is:
function saveFile() {
var win = window.open();
win.document.write('<iframe src="' + document.querySelector('canvas').toDataURL() + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
}
I love it!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!