Question

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

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;
}

Answer 1

这似乎对我有用：

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

Answer 2

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

这是不可能通过window.open进行的，所以除非有一些特定于浏览器的黑客攻击，否则你运气不好。

如果您确实需要文件名，可以尝试使用a，<a href="put stuff here" download="filename here">中的新下载属性。尽管如此，它还没有得到广泛的支持。

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

Answer 3

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

插件有2个子功能，你可以单独调用它来将图像添加到画布，另一个是下载位于画布上的当前图像。

将图片添加到画布

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

从画布下载图片

为此你需要传递canvas元素的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
    });  // 
});

首先，您需要下载可在此处找到的插件文件http://www.thetutlage.com/post=TUT213

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

使用Javascript将文件扩展名下载Html5 canvas元素作为图像

3 个答案: