下载一个Html5 canvas元素作为一个带有Javascript文件扩展名的图像 [英] Download a Html5 canvas element as an image with the file extension with 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.

CanvasToImage 库似乎无法实现这一点。

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

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

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文件扩展名的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！