Question

我有一个大问题，请帮我！这是我的代码：

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.js"></script>
  <script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
  <script type="text/javascript" src="jquery.plugin.html2canvas.js"></script>

  <script type="text/javascript">
    $(function() {
      $("#show_button").click(function() {
        html2canvas(document.body, {
          onrendered: function(canvas) {
            $("<img/>", {
              id: "image",
              src: canvas.toDataURL("image/png"),
              width: '95%',
              height: '95%'
            }).appendTo($("#show_img").empty());
          }
        });
      });
    });
  </script>
</head>

<body>
  <h1>test</h1>
  <button id="show_button">Show Image</button>

  //this is a problem
  <a href="" download="dl.jpg">download</a>
  <div id="show_img"></div>
</body>

</html>

如果我的观点是正确的。要保存图像，下载需要正确的文件路径和文件名。我使用html2canvas.js，将目标转换为图像。但是当我想保存图像时，我不知道正确的文件路径和文件名。（因为图像是动态文件，而不是静态文件？）如何获得保存此图像的正确值？谢谢！

Answer 1

好的，我发现了使用此功能完成所需的canvas2image.js

downloadPNG = function () {
  html2canvas(document.body, {
    onrendered: function (canvas) {
      Canvas2Image.saveAsPNG(canvas);
    }
  });
}

这是小提琴

http://jsfiddle.net/link2twenty/w8Lk3znf/

Answer 2

使用html2canvas它会将html转换为canvas并使用canvas2image包将canvas转换为图像（或）你可以传递画布数据.toDataURL（“image / png”）;

示例：

var imagename = '<YOUR_IMAGE_NAME>';
var link = event.target;
var canvasData = '<YOUR_CANVAS_DATA>'.toDataURL("image/png");
downloadImageFormat(link, canvasData, imagename);
function downloadImageFormat(link, canvasData, imagename) {
    link.href = canvasData;
    link.download = imagename;
}

这是小提琴demo

Answer 3

只需使用 html2canvas 库，只需添加插件和调用方法即可将HTML转换为Canvas，然后下载为图片PNG

        html2canvas(document.getElementById("image-wrap")).then(function(canvas) {
            var link = document.createElement("a");
            document.body.appendChild(link);
            link.download = "manpower_efficiency.jpg";
            link.href = canvas.toDataURL();
            link.target = '_blank';
            link.click();
        });

来源：http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/

将html转换为图像并保存？（使用html2canvas.js）

3 个答案: