将HTML5 canvas元素作为带有Javascript文件扩展名的图像下载

我希望能够下载HTML5 canvas元素作为带有Javascript文件扩展名的图像。将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; 
}

来源

2012-03-28 Nicholas Murray

为了迫使/建议在浏览器的下载对话框中的文件名，你将需要发送的Content-Disposition: attachment; filename=foobar.png头。

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

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

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

来源

2012-03-28 20:56:25

我以为通过ajax创建功能，但我希望有一个客户端解决方案。 – 2012-03-28 21:09:00

似乎只有Chrome支持下载属性 - 虽然很酷。 http://html5-demos.appspot.com/static/a.download.html – 2012-03-28 21:33:25

嗨，我已经创建了一个jQuery插件，它可以让你轻松地做同样的任务，但它也使用PHP下载图像。让我解释它是如何工作的

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

添加图片到画布

为此，您需要通过canvas元素的ID和你想从画布添加

下载图像的图像的路径

为此，您需要传递画布元素的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

来源

2012-06-26 04:52:35

不错，你应该坚持在github上。如果你这样做，让我知道。 – 2012-06-26 08:07:53

这似乎为我工作的插件文件：

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

来源

2013-05-08 15:48:00 Meir

不错的一个。这很简单，很有效。 – Relm 2014-11-21 11:10:42

画布的背景图像不包含在生成的图像中。有没有任何方法可以包含背景图片？ – faizi 2015-12-14 10:59:52

@faizi你可能需要在画布上绘制它，而不是仅仅使用CSS设置背景，那是你在做什么？ – Meir 2015-12-18 17:47:12

将HTML5 canvas元素作为带有Javascript文件扩展名的图像下载

回答

相关问题