将html2canvas图像下载到桌面 [英] Download html2canvas image to desktop

问题描述

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

I found this https://jsfiddle.net/8ypxW/3/ and I would like to know how to download image to desktop. I only see save png but no download if it's possible can you give me the script?

     $(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);
        }
      });
    });
}); 

推荐答案

问题是canvas2image.js脚本的错误网址在你的小提琴。我创造了一个适合你的小提琴，让你看看。在下面的代码中，您可以看到2个保存PNG按钮。一个是使用Canvas2Image.saveAsPNG函数，但这个方法的一个小问题是你无法给出保存图像的名称。第二个按钮使用 HTML下载属性，但并非所有浏览器都支持。

The problem was the wrong url of canvas2image.js script in your fiddle. I created a fiddle with the proper one for you to have a look. In the code below you can see 2 "Save PNG" buttons. One is using Canvas2Image.saveAsPNG function, but the little issue with this method is the fact you cannot give the name of the saved image. The second button is using HTML download attribute, but it is not supported by all browsers.

$(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);
    }
  }
});

小提琴

最好的问候

Krzysztof

Best regards
Krzysztof

这篇关于将html2canvas图像下载到桌面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！