使用 html2canvas 将页面保存成图片（或对指定元

有时我们需要实现在浏览器端直接对整个或部分页面进行截屏，比如移动端常见的“长按网页保存为图片”功能。这个借助 html2canvas 这个第三方 js 库即可实现，下面通过样例演示其如何使用。

只要浏览器支持 Canvas 即可，包括：Firefox 3.5+、Google Chrome、Opera 新的版本、IE9 以上的浏览器。

当然并不是所有的页面元素都可以进行转换的，下面是不支持的情况：

（1）首先到官网将 html2canvas.js 下载到本地。

（2）然后在页面中将其引用即可。

<script type="text/javascript" src="js/html2canvas.js"></script>

（1）效果图

（2）样例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
  </head>
  <body style="margin:0px">
    <div id="capture" style="padding: 10px; background: #f5da55; width: 200px;">
      <h4 style="color: #000; ">欢迎访问 hangge.com</h4>
    </div>
    <button type="button" name="button" onclick="convert()">开始生成</button>
    <br>
    <script type="text/javascript" src="js/html2canvas.js"></script>
    <script type="text/javascript">
      //开始转换
      function convert() {
        html2canvas(document.body).then(canvas => {
          document.body.appendChild(canvas)
        });
      }
    </script>
  </body>
</html>

2，将指定 DOM 元素转成 Canvas

下面样例只将按钮上方的 div 渲染成 Canvas。

html2canvas(document.querySelector("#capture")).then(canvas => {
  document.body.appendChild(canvas)
});

3，将 Canvas 转换成 base64 形式

在html5中，可以使用formaction属性来对每个表单元素分别指定不同的提交页面，同时也可以使用formmethod属性来对每个表单元素分别指定不同的提交方法。对于任何html页面的元素来说，一般程序员或页面设计师会给元素直接赋予一个样式属性或者利用css文件里的伪类来定义元素样式，使元素在页面上显示时能够更加美观。async 属性仅适用于外部脚本（只有在使用 src 属性时）有多种执行外部脚本的方法： 如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行） 如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行 如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本 为html元素增加manifest，开发离线web应用程序时他与api结合使用，定义一个url，在这个url上描述文档的缓存信息。

html2canvas(document.querySelector("#capture")).then(canvas => {
  var imgUrl = canvas.toDataURL("image/png"); // 将canvas转换成img的src流
  console.log("base64编码数据：", imgUrl);
});

（2）转换时可以设置截图质量（0~1）

html2canvas(document.querySelector("#capture")).then(canvas => {
  var imgUrl = canvas.toDataURL("image/png", 1); // 此方法可以设置截图质量（0-1）
  console.log("base64编码数据：", imgUrl);
});

三、进阶用法

html2canvas 在使用时还有许多可选的配置参数，下面样例生成一个 75*75 的 canvas。

html2canvas(document.querySelector("#capture"),{
  width: 75,
  height: 75
}).then(canvas => {
  document.body.appendChild(canvas)
});

2，设置 Canvas 的背景色

（1）使用 backgroundColor 这个属性可以设置 canvas 的背景色：

（2）下面将背景色改成绿色

html2canvas(document.querySelector("#capture"),{
  width: 240,
  height: 120,
  backgroundColor: "#00ff00"
}).then(canvas => {
  document.body.appendChild(canvas)
});

3，设置放大倍数

（1）使用 scale 属性可以修改渲染时的放大倍数（默认为 1），将其调大可以解决低分辨率设备下生成的图片模糊问题。

（2）下面是当 scale 设置为2时，生成的图片。

html2canvas(document.querySelector("#capture"),{
  scale: 2
}).then(canvas => {
  document.body.appendChild(canvas)
});

4，指定渲染的 Canvas

如果页面上原先就有个 canvas 元素，我们希望可以将图片绘制在它上面，可以使用 canvas 属性设置html2canvas 截图html2canvas 截图。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
  </head>
  <body style="margin:0px">
    <div id="capture" style="padding: 10px; background: #f5da55; width: 200px;">
      <h4 style="color: #000; ">欢迎访问 hangge.com</h4>
    </div>
    <button type="button" name="button" onclick="convert()">开始生成</button>
    <br>
    <canvas id="myCanvas" width="220" height="84"></canvas>
    <script type="text/javascript" src="js/html2canvas.js"></script>
    <script type="text/javascript">
      //开始转换
      function convert() {
        html2canvas(document.querySelector("#capture"),{
          canvas: document.querySelector("#myCanvas")
        }).then(canvas => {
        });
      }
    </script>
  </body>
</html>

附：自动保存为图片并下载

（1）上面样例如果要将 DOM 元素变为图片保存下来，都是先将其转成 canvas，然后再手动在 canvas 上点击右键，通过“另存为”功能下载到本地。

（2）如果想要实现图片自动生成、自动下载的话可以借助 FileSaver.js 这个第三方库。其具体安装配置可以参考我之前的写的文章：

（3）下面是一个简单样例，点击“开始生成”按钮后，可以看到浏览器直接自动下载文件。

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-102009-1.html