javascript - 将 html 转换为图像,并保存?(使用 html2canvas.js)

标签 javascript jquery html canvas html2canvas

我有一个大问题, 请帮我 ! 这是我的代码:

<!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,将目标转换为图像。 但是当我想保存图像时,我不知道正确的文件路径和文件名。(因为图像是动态文件,而不是静态文件?) 我怎样才能得到正确的值(value)来保存这张图片? 谢谢!

最佳答案

好的,我发现 canvas2image.js 可以满足您对这个功能的需求

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

这是一个fiddle

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

关于javascript - 将 html 转换为图像,并保存?(使用 html2canvas.js),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34091760/

相关文章:

javascript - JQuery 是否支持字典(键,值)集合?

javascript - jQuery 和 CSS 问题 - 动画

html - IE 将 anchor 元素定位在图像上

java - 无法找到双引号来结束字符串

javascript - 如何使文本文件在获取并添加到 div 时具有相同的布局

javascript - 在 Canvas 上交换图像会占用内存

jquery - OnClick 事件在 jQuery 中不起作用

javascript - chai 测试中未按请求调用回调

javascript - 如果 cookie 存在则运行函数

javascript - 对于连接速度较慢的用户,我想用图像标签替换视频标签