将html2canvas图像下载到桌面

时间:2016-12-15 13:53:16

标签: javascript jquery

我发现了这个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);
        }
      });
    });
}); 

2 个答案:

答案 0 :(得分:10)

问题是你的小提琴中的canvas2image.js脚本的错误网址。我创造了一个适合你的小提琴,让你看看。在下面的代码中,您可以看到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

最好的问候 的Krzysztof

答案 1 :(得分:6)

更新2018年

请注意,在新版本的 Html2Canvas 中, 已渲染 选项为deprecated,并已替换为promises。

要能够将图像下载到用户计算机,您可以使用以下方式:


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);

    }
}

遇到的问题

实际上我能够下载图像,但是空白 ...(至少在我看来,这可能是由于内容包装器( id =“ #boundary“ )没有定义宽度或高度,因此为内容包装器指定了 height width 就可以了对我来说。