下载一个Html5 canvas元素作为一个带有Javascript文件扩展名的图像

问题描述

我想要能够下载一个Html5 canvas元素作为带有Javascript文件扩展名的图片。

I would like to be able to download a Html5 canvas element as an image with the file extension with Javascript.

库似乎无法实现这一点。

The CanvasToImage library does not seem to be able to achieve this.

以下是我的代码，您可以在此。

Here is my code so far which you can see at this 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;
}

推荐答案

在浏览器的下载对话框中的文件名，您将需要发送 Content-Disposition：attachment; filename = foobar.png 。

In order to force/suggest a file name in the browser's download dialog, you would need to send the Content-Disposition: attachment; filename=foobar.png header.

这不可能通过 window.open ，所以你运气不好，除非有一些浏览器特定的黑客这个。

This is not possible to do via window.open, so you're out of luck unless there are some browser-specific hacks for this.

如果你真的需要文件名，你可以尝试使用新的下载属性 a ，< a href =put stuff heredownload =filename here> 。但它还没有得到广泛的支持。

If you really need the filename, you could try using the new download attribute in a, <a href="put stuff here" download="filename here">. It isn't very widely supported yet though.

另一个替代方法是先使用ajax将数据提交到服务器，然后将浏览器重定向到某个服务器端脚本，然后服务器将使用正确的头。

Another alternative would be to first submit the data to the server using ajax, then redirect the browser to some server-side script which would then serve the data with the correct header.

这篇关于下载一个Html5 canvas元素作为一个带有Javascript文件扩展名的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！