-
-
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> |
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 think we must add this code:
ctx.clearRect(0,0,500,500);Otherwise, the Image will have many repeat images!!!