Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Add Comment
Please, Sign In to add comment