javascript - 创建模因并存储到本地
问题描述
我正在尝试通过获取用户的输入在浏览器中创建模因图像。
用户还应该能够在创建模因后下载图像。
下面给出了代码,其中下载/保存按钮不起作用
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");
if (image != null)
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
// clear previous
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (image != null)
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
// Text attributes
ctx.font = '30pt Impact';
ctx.textAlign = 'center';
ctx.strokeStyle = 'black';
ctx.lineWidth = 3;
ctx.fillStyle = 'white';
if (topLine != null) {
ctx.fillText(topLine, canvas.width / 2, 40);
ctx.strokeText(topLine, canvas.width / 2, 40);
}
if (bottomLine != null) {
ctx.fillText(bottomLine, canvas.width / 2, canvas.height - 20);
ctx.strokeText(bottomLine, canvas.width / 2, canvas.height - 20);
}
}
function saveFile() {
window.open(document.querySelector('canvas').toDataURL());
}
//--------
function handleFileSelect(evt) {
//make canvas
var canvasWidth = 500;
var canvasHeight = 500;
var file = evt.target.files[0];
//image upload
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.imageSRC = null;
window.topLineText = "";
window.bottomLineText = "";
window.imageSRC = null;
window.topLineText = null;
window.bottomLineText = null;
var file = document.querySelector("#file");
file.onchange = handleFileSelect;
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);
<!DOCTYPE html>
<html>
<head>
<title>html2canvas</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<h1>CREATE YOUR OWN MEME</h1>
<p>Upload an image, type in some lines and save</p>
<input type="file" id="file" />
</div>
<div id="image-container">
<canvas width="500" height="500" id="canvas"></canvas>
<div class="inputs">
<br/>
<input id="topLineText" type="text" placeholder="TOP LINE"><br/>
<br/>
<input id="bottomLineText" type="text" placeholder="BOTTOM LINE"><br/>
<button id="saveBtn" onclick="saveFile()">Save</button>
</div>
</div>
</body>
</html>
我认为 saveFile() 中应该有一些修复,有人可以帮我修复这段代码吗?我试图在没有角度支持的情况下做到这一点
解决方案
似乎在新窗口中打开画布数据 url 不起作用。下载图像的更好方法是创建一个链接标签并分配您的画布 url,然后打开链接试试这个小提琴https://jsfiddle.net/gd3a7hLn/
var link = document.createElement('a');
link.download = 'filename.png';
link.href = document.getElementById('canvas').toDataURL()
link.click();