返回 导航

其他

hangge.com

JS - 使用 html2canvas 将页面保存成图片(或对指定元素截图)

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

一、基本介绍

1,什么是 html2canvas

  • html2canvas 可以通过获取 HTML 的某个元素,然后生成 Canvas,从而让用户保存为图片。
  • html2canvas 工作原理是将当页面渲染成一个 Canvas 图片,通过读取 DOM 并将不同的样式应用到这些元素上。
  • html2canvas 不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。

2,适用的浏览器

只要浏览器支持 Canvas 即可,包括:Firefox 3.5+Google ChromeOpera 新的版本、IE9 以上的浏览器。

3,注意事项

当然并不是所有的页面元素都可以进行转换的,下面是不支持的情况:
  • 不支持 iframe
  • 不支持跨域图片(可以先将线上图片转换成 base64,然后用 base64 作为图片路径)
  • 不支持 flash
  • 不支持 transformtransition 过渡、animation 动画(备注:transform 初始布局是可以的,但是不能参与动画类的操作)

4,安装配置

(1)首先到官网将 html2canvas.js 下载到本地。

(2)然后在页面中将其引用即可。
<script type="text/javascript" src="js/html2canvas.js"></script>

二、基本用法

1,将整个页面转成 Canvas

(1)效果图
  • 点击“开始生成”按钮后,会将整个页面渲染成一个 canvas,并将这个 canvas 添加到页面尾部。
  • 右键点击生成的 canvas,可以将其作为图片保存到本地。

(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 形式

(1)上面样例生成 canvas 后,便直接显示在页面上进行预览。我们也可以将生成的 canvas 转成 base64 形式用于提交到后台,或者作为 <image> 元素的 src 属性来显示。
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);
});

三、进阶用法

1,设置生成的 Canvas 的高度和宽度

html2canvas 在使用时还有许多可选的配置参数,下面样例生成一个 75*75 canvas
html2canvas(document.querySelector("#capture"),{
  width: 75,
  height: 75
}).then(canvas => {
  document.body.appendChild(canvas)
});

2,设置 Canvas 的背景色

(1)使用 backgroundColor 这个属性可以设置 canvas 的背景色:
  • 默认值为白色(#ffffff
  • 如果想要背景透明,可以将其设为 null

(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 属性设置。
<!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)下面是一个简单样例,点击“开始生成”按钮后,可以看到浏览器直接自动下载文件。
<!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" src="js/FileSaver.js"></script>
    <script type="text/javascript">
      //开始转换
      function convert() {
        html2canvas(document.querySelector("#capture")).then(canvas => {
          //将canvas内容保存为文件并下载
          canvas.toBlob(function(blob) {
             saveAs(blob, "hangge.png");
          });
        });
      }
    </script>
  </body>
</html>
评论

全部评论(0)

回到顶部