将画布下载为PNG图像
Download a canvas as PNG image
当我尝试将画布下载为PNG图像时,浏览器会在新页面中打开图像,但不会下载。。。我的下载代码:
$("#btnScaricaEtichetta").click(function(){
console.log("Download... ");
location.href = document.getElementById("latoSinistro").toDataURL();
this.download = "filename";
});
有没有办法简单地下载它?抱歉英语不好,我是意大利人
因为它使用外部函数,这有点像黑客攻击,但它似乎在任何浏览器上都能工作。我使用工具FileSaver.js来完成文件下载工作,并使用canvas-toBlob.js在Chrome和其他浏览器上执行toBlob功能。
<script src="https://rawgit.com/eligrey/FileSaver.js/master/FileSaver.js"></script>
<script src ="https://rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"></script>
<h1 onclick="download_image()">Click Here to download image</h1>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
<script>
// lets put something on a canvas..
// reminder this works without jQuery .ready() only because this script is the last element in the document.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
function download_image(){
// Dump the canvas contents to a file.
var canvas = document.getElementById("myCanvas");
canvas.toBlob(function(blob) {
saveAs(blob, "output.png");
}, "image/png");
};
</script>
相关文章:
- 将SVG下载为PNG图像
- PNG图像被覆盖,但每个图像都有一个链接可以更改,每次一个-Javascript/jQuery/CSS
- 将画布下载为PNG图像
- 在 JavaScript 中将一个.PNG图像拖放到另一个图像上
- 将普通的 PNG 图像转换为 JSON 数据,然后存储到对象
- 使用AJAX从PHP获取PNG图像
- 如何使用纯javascript或jQuery将HTML5画布屏幕作为png图像保存到项目的特定文件夹中
- 带有png图像的3D动画
- 如何从 base64 数据 URI 在服务器端保存 PNG 图像
- PNG 图像更改颜色
- 使用网络工作者和画布合并 png 图像
- 将 png 图像从 JavaScript 传递到 PHP(错误:请求 URI 太大)
- 如何将画布另存为 PNG 图像
- 如何使 png 图像充当按钮
- 如何将.png图像放入头部标题中
- 使用 FabricJS 将图案添加到 png 图像(在画布中)
- 将用Javascript绘制的外部SVG文件导出为PNG图像
- 通过画布从 svg 或 svg 输出 300 张具有正确文件名的 png 图像
- 使用 JavaScript 绘制到 HTML5 画布时调整.png图像的大小
- Html代码到Png图像