我希望能够使用 Javascript 下载 Html5 canvas 元素作为具有文件扩展名的图像。
CanvasToImage库似乎无法实现这一点。
到目前为止,这是我的代码,您可以在 JsFiddle 中看到它.
<div id="canvas_container">
</div>
<p>
<a href='#' id="create_image">create</a>
<a href="#" id="download_image">download</a>
</p>
$("#create_image").click(function() {
var cnvs = createSmileyOnCanvas();
$('#canvas_container').append(cnvs);
});
$("#download_image").click(function() {
var img = $('#smiley_canvas').toDataURL("image/png");
var uriContent = "data:application/octet-stream," + encodeURIComponent(img);
window.open(uriContent, 'download smiley image');
});
function createSmileyOnCanvas() {
var canvas = document.createElement('canvas');
canvas.id = 'smiley_canvas';
var ctx = canvas.getContext('2d');
// Draw shapes
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
return canvas;
}
最佳答案
这似乎对我有用:
<a id="downloadImgLink" onclick="$('#downloadImgLink').attr('href', canvas.toDataURL());" download="MyImage.png" href="#" target="_blank">Download Drawing</a>
关于javascript - 使用 Javascript 下载 Html5 canvas 元素作为具有文件扩展名的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9915199/