javascript - 下载 html2canvas 图像到桌面

Question

我找到了这个https://jsfiddle.net/8ypxW/3/我想知道如何将图像下载到桌面。我只看到保存png，但没有下载，如果可能的话，你能给我脚本吗？

     $(function() { 
     $("#btnSave").click(function() { 
       html2canvas($("#widget"), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            // Convert and download as image 
            Canvas2Image.saveAsPNG(canvas); 
            $("#img-out").append(canvas);
            // Clean up 
            //document.body.removeChild(canvas);
        }
      });
    });
}); 

Answer 1

问题是你的 fiddle 中canvas2image.js脚本的URL错误。我用合适的 fiddle 制作了一个 fiddle 供您查看。在下面的代码中您可以看到 2 个“保存 PNG”按钮。一种是使用 Canvas2Image.saveAsPNG 函数，但此方法的小问题是您无法给出保存图像的名称。第二个按钮使用 HTML download attribute ，但并非所有浏览器都支持。

$(function() {
  $("#btnSave").click(function() {
    html2canvas($("#widget"), {
      onrendered: function(canvas) {
        Canvas2Image.saveAsPNG(canvas);
      }
    });
  });

  $("#btnSave2").click(function() {
    html2canvas($("#widget"), {
      onrendered: function(canvas) {
        saveAs(canvas.toDataURL(), 'canvas.png');
      }
    });
  });

  function saveAs(uri, filename) {
    var link = document.createElement('a');
    if (typeof link.download === 'string') {
      link.href = uri;
      link.download = filename;

      //Firefox requires the link to be in the body
      document.body.appendChild(link);

      //simulate click
      link.click();

      //remove the link when done
      document.body.removeChild(link);
    } else {
      window.open(uri);
    }
  }
});

fiddle