【问题标题】：How to save img to user's local computer using HTML2canvas如何使用 HTML2canvas 将图像保存到用户的本地计算机
【发布时间】：2015-10-17 20:25:22
【问题描述】：

我正在使用 HTML2canvas .4.1 渲染屏幕截图，并希望将图像保存到用户的本地计算机。如何实现？请注意，我是初学者，所以实际代码对我最有帮助。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>

<button id="save_image_locally">download img</button>

   <div id="imagesave">
      <img id='local_image' src='img1.jpg'>
   </div>

<script>

    $('#save_image_locally').click(function(){

            html2canvas($('#imagesave'), 
             {
                onrendered: function (canvas) {
                    var img = canvas.toDataURL("image/png");
                    alert('This will currently open image in a new window called "data:". Instead I want to save to users local computer. Ideally as a jpg instead of png.');
                    window.open(img);
                }
             });
            });

</script>

【问题讨论】：

标签： html2canvas

【解决方案1】：

注意：此答案来自 2015 年，图书馆已更新。
检查下面的答案以了解替代实现。

试试这个（注意它使用了下载属性。支持下载属性的浏览器见the caniuse support table）

<script>

  $('#save_image_locally').click(function(){
    html2canvas($('#imagesave'), 
    {
      onrendered: function (canvas) {
        var a = document.createElement('a');
        // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
        a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        a.download = 'somefilename.jpg';
        a.click();
      }
    });
  });

</script>

【讨论】：

哦，如果要设置 jpeg 质量/文件大小，toDataURL 函数还需要一个介于 0 和 1 之间的质量的第二个参数
谢谢@2pha。这对我有用。非常感激。起初，在原始图像的边界之外节省了一些额外的空间。我能够通过向 div 添加样式来修复。例如，要保存 512x512 的图像，我这样做：
谢谢。但是，当我应用它时，一切正常，但背景是黑色而不是白色。关于如何解决这个问题的任何想法？
@ArkoElsenaar 将 css background-color:white 添加到您的元素中。或在此处查看其他解决方案：stackoverflow.com/questions/14584946/…
这是完美的解决方案，您可以将 jpg 更改为 png a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

【解决方案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

基于Krzysztof的回答

document.getElementById("download").addEventListener("click", function() {
    
    html2canvas(document.querySelector('#boundary')).then(function(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 就可以了对我来说。

希望对你有帮助

【讨论】：

这对我来说在 Chrome 68、FireFox 61 和 Safari 11.1 中运行良好。
将“html2canvas(document.querySelector('#boundary'))”替换为“html2canvas(document.querySelector('#boundary'),{useCORS: true,allowTaint: true,})”如果你有图片。
是的，该示例运行良好，但看起来它没有捕获所需的屏幕截图，它只捕获了部分 boddry。
应该是新接受的答案。
这在 2021 年仍然适用于 html2canvas v1.3.3。

【解决方案3】：

这是转换为 PNG 的最新代码。

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

【讨论】：