canvas 制作表情包
代码如下。
1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <title>表情制作</title> 6 7 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 8 <meta name="mobile-web-app-capable" content="yes"> 9 <meta name="apple-mobile-web-app-capable" content="yes"> 10 <style> 11 #image-container { 12 display: flex; 13 } 14 </style> 15 </head> 16 17 <body> 18 <script> 19 20 21 </script> 22 23 <div> 24 <input type="file" id="file" /> 25 </div> 26 <div id="image-container"> 27 <canvas width="500" height="500"></canvas> 28 <div> 29 <span>Top Line:</span><br/> 30 <input id="topLineText" type="text"><br/> 31 <span>Bottom Line:</span><br/> 32 <input id="bottomLineText" type="text"><br/> 33 <button id="saveBtn">Save</button> 34 </div> 35 </div> 36 <script> 37 function textChangeListener (evt) { 38 var id = evt.target.id; 39 var text = evt.target.value; 40 41 if (id == "topLineText") { 42 window.topLineText = text; 43 } else { 44 window.bottomLineText = text; 45 } 46 47 redrawMeme(window.imageSrc, window.topLineText, window.bottomLineText); 48 } 49 50 function redrawMeme(image, topLine, bottomLine) { 51 // 52 var canvas = document.querySelector('canvas'); 53 var ctx = canvas.getContext("2d"); 54 if (image != null) 55 ctx.drawImage(image, 0, 0, canvas.width, canvas.height); 56 57 // 58 ctx.font = '30pt Impact'; 59 ctx.textAlign = 'center'; 60 ctx.strokeStyle = 'black'; 61 ctx.lineWidth = 3; 62 ctx.fillStyle = 'white'; 63 64 if (topLine != null) { 65 ctx.fillText(topLine, canvas.width / 2, 40); 66 ctx.strokeText(topLine, canvas.width / 2, 40); 67 } 68 69 if (bottomLine != null) { 70 ctx.fillText(bottomLine, canvas.width / 2, canvas.height - 20); 71 ctx.strokeText(bottomLine, canvas.width / 2, canvas.height - 20); 72 } 73 } 74 75 function saveFile() { 76 window.open(document.querySelector('canvas').toDataURL()); 77 } 78 79 function handleFileSelect(evt) { 80 var canvasWidth = 500; 81 var canvasHeight = 500; 82 var file = evt.target.files[0]; 83 84 85 86 var reader = new FileReader(); 87 reader.onload = function(fileObject) { 88 var data = fileObject.target.result; 89 90 91 var image = new Image(); 92 image.onload = function() { 93 94 window.imageSrc = this; 95 redrawMeme(window.imageSrc, null, null); 96 } 97 98 99 image.src = data; 100 console.log(fileObject.target.result); 101 }; 102 reader.readAsDataURL(file) 103 } 104 105 window.topLineText = ""; 106 window.bottomLineText = ""; 107 var input1 = document.getElementById('topLineText'); 108 var input2 = document.getElementById('bottomLineText'); 109 input1.oninput = textChangeListener; 110 input2.oninput = textChangeListener; 111 document.getElementById('file').addEventListener('change', handleFileSelect, false); 112 document.querySelector('button').addEventListener('click', saveFile, false); 113 </script> 114 115 </body> 116 </html>