【问题标题】：Download html2canvas image to desktop将 html2canvas 图像下载到桌面
【发布时间】：2017-05-01 03:45:19
【问题描述】：

我找到了这个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);
        }
      });
    });
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

问题是您小提琴中 canvas2image.js 脚本的错误 url。我用合适的小提琴制作了一个小提琴供你看。在下面的代码中，您可以看到 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

【讨论】：

很抱歉这么晚才回复，我只是看了看，效果很好。谢谢，但我还有另一个问题，我的 div 中有图像我也可以将新图像上传到我的 div 尝试下载时我看不到我上传的图像你能帮帮我吗？我得到的只是一张黑色图像，上面有一些已经是他们的文字
嗨！当然，我会尽力提供帮助。我相信问题可能与图像透明度和您尝试保存的格式有关。您是否可以分享导致问题的图像和您当前的代码？最好的！
这是我正在处理的代码这是我几天前问的一个过去的问题。唯一的区别是我可以从我的桌面上传图片希望这有助于stackoverflow.com/questions/41150999/…
嗨！我有点困惑；）我注意到在这个页面上：torcdesign.com/mom.php 你没有设置“下载”元素的 href 属性。您可以尝试在 download.style.display = "inline";line 之后添加此代码吗？ download.href = result.children[0].toDataURL();
感谢您的提琴。这段代码还有另一个问题。您的图像指向与 jsfiddle 不同的域，因此代码无法正常工作。但是，如果您使用 download.href = result.children[0].toDataURL(); 更新您的网站 torcdesign.com我相信它会起作用。检查这个：jsfiddle.net/oLksyvan

【解决方案2】：

2018 年更新

请注意，在新版本的 Html2Canvas 中，onrendered 选项是 deprecated 并替换为 promise。

为了能够将图像下载到用户计算机，您可以使用以下内容：

HTML

<html>
    <head></head>
    <body>
        <div id="boundary">
            <div class="content">
                <p>My content here</p>
            </div>
        </div>

        <button id="download">Download</button>

    </body>
</html>

Javascript（纯 JavaScript）

基于Krzysztof的回答

document.getElementById("download").addEventListener("click", function() {

    html2canvas(document.querySelector('#boundary')).then(function(canvas) {

        console.log(canvas);
        saveAs(canvas.toDataURL(), 'file-name.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);

    }
}

遇到的问题

确实，我能够下载图像，但它是 blank ...可能的原因（至少在我的情况下）是内容包装器（id=" #boundary") 没有定义宽度或高度，因此为 content wrapper 指定 height 和 width 就可以了对我来说。

【讨论】：

如何更改图片类型？我尝试用 file-name.jpg 替换 file-name.png，它总是以 png 格式下载。