Javascript 下载画布作为PNG图像

当我尝试将画布下载为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>

点击这里下载图片
//让我们把东西放在画布上。。
//提醒：如果不使用jQuery.ready（），则此脚本有效，因为此脚本是文档中的最后一个元素。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=“#FF0000”；
ctx.fillRect（0,0150,75）；
ctx.moveTo（0,0）；
ctx.lineTo（200100）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.arc（95,50,40,0,2*Math.PI）；
ctx.stroke（）；
函数下载_image（）{
//将画布内容转储到文件中。
var canvas=document.getElementById（“myCanvas”）；
canvas.toBlob（函数（blob）{
saveAs（blob，“output.png”）；
}，“图像/png”）；
};

因为它使用外部功能，这有点像黑客攻击，但它似乎在任何浏览器上都能工作。我使用工具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>

点击这里下载图片
//让我们把东西放在画布上。。
//提醒：如果不使用jQuery.ready（），则此脚本有效，因为此脚本是文档中的最后一个元素。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=“#FF0000”；
ctx.fillRect（0,0150,75）；
ctx.moveTo（0,0）；
ctx.lineTo（200100）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.arc（95,50,40,0,2*Math.PI）；
ctx.stroke（）；
函数下载_image（）{
//将画布内容转储到文件中。
var canvas=document.getElementById（“myCanvas”）；
canvas.toBlob（函数（blob）{
saveAs（blob，“output.png”）；
}，“图像/png”）；
};

canvas.toDataURL（“图像/png”）

？您确定

location.href

正确抓取画布了吗？另请看

image/png

参数。我已将“image/png”添加到toDataURL函数中，但结果不变。。。。浏览器打开一个窗口，显示带有以下url的img:data:image/png；base64，iVBORw0KGgoA ecc ecc（如此长）在

this.download=“filename”行中不清楚此

指向的是什么。请查看@kaido。。。只是想法。。。这些只是想法-P

canvas.toDataURL（“image/png”）

？您确定

location.href

正确抓取画布了吗？另请看

image/png

参数。我已将“image/png”添加到toDataURL函数中，但结果不变。。。。浏览器打开一个窗口，显示带有以下url的img:data:image/png；base64，iVBORw0KGgoA ecc ecc（如此长）在

this.download=“filename”行中不清楚此

指向的是什么。请查看@kaido。。。只是想法。。。这些只是想法-例如：工作，非常感谢