使用Javascript将Html5画布元素下载为具有文件扩展名的图像

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

本文关键字：下载 文件 图像 扩展名 元素 Html5 Javascript 布元素 使用      更新时间：2023-09-26

我希望能够使用Javascript下载一个Html5画布元素作为图像，文件扩展名为。

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

这似乎对我有用：

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

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

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

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

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

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

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

将图像添加到画布

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

相关文章：