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

Download a Html5 canvas element as an image with the file extension with Javascript

提问by Nicholas Murray

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

我希望能够将 Html5 画布元素下载为带有 Javascript 文件扩展名的图像。

The CanvasToImagelibrary does not seem to be able to achieve this.

该CanvasToImage库似乎并没有能够做到这一点。

Here is my code so far which you can see at this JsFiddle.

到目前为止，这是我的代码，您可以在此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;
}

采纳答案by Jani Hartikainen

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.pngheader.

为了在浏览器的下载对话框中强制/建议文件名，您需要发送Content-Disposition: attachment; filename=foobar.png标题。

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

这不可能通过 via 完成window.open，所以除非有一些特定于浏览器的黑客攻击，否则你很不走运。

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.

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

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.

另一种选择是首先使用 ajax 将数据提交到服务器，然后将浏览器重定向到某个服务器端脚本，然后该脚本将使用正确的标头提供数据。

回答by Meir

This seems to work for me:

这似乎对我有用：

<a id="downloadImgLink" onclick="$('#downloadImgLink').attr('href', canvas.toDataURL());" download="MyImage.png" href="#" target="_blank">Download Drawing</a>

<a id="downloadImgLink" onclick="$('#downloadImgLink').attr('href', canvas.toDataURL());" download="MyImage.png" href="#" target="_blank">Download Drawing</a>

回答by Aman Virk

Hi i have created a jquery plugin which will let you do the same task with ease but it also make use of php to download the image. let me explain how it works

嗨，我创建了一个 jquery 插件，它可以让您轻松完成相同的任务，但它也可以使用 php 下载图像。让我解释一下它是如何工作的

Plugin has 2 sub function that you can call independently to add image to the canvas and the other one is to download the current image lying on the canvas.

插件有两个子函数，您可以独立调用将图像添加到画布，另一个是下载画布上的当前图像。

Add image to the canvas

将图像添加到画布

For this you need to pass the id of the canvas element and the path of the image you want to add

为此，您需要传递画布元素的 id 和要添加的图像的路径

download image from the canvas

从画布下载图像

For this you need to pass the id of the canvas element

为此，您需要传递画布元素的 id

 $('body').CanvasToPhp.upload({
    canvasId: "canvas",   // passing the canvasId
    image: "455.jpg"      // passing the image path
});

// downloading file
$('#download').click(function(){
    $('body').CanvasToPhp.download({
        canvasId: "canvas"   // passing the canvas id
    });  // 
});

First you need to download the plugin file which you can find here http://www.thetutlage.com/post=TUT213

首先你需要下载插件文件，你可以在这里找到http://www.thetutlage.com/post=TUT213

I have also created a little demo http://thetutlage.com/demo/canvasImageDownload

我还创建了一个小演示http://thetutlage.com/demo/canvasImageDownload