H5：html2canvas使用笔记

场景描述：

在H5页面需要生成截图，用于分享给其他用户。可以通过开源库html2canvas实现这一功能。

 

官方文档

github -> https://github.com/niklasvh/html2canvas

使用文档 -> http://html2canvas.hertzen.com/documentation

 

安装

//这里最好指定安装版本，原因见下文
npm i html2canvas@1.0.0-rc.4

 

使用

import html2canvas from 'html2canvas';
​
generateShareImage() {
​
        const canvas = document.createElement("canvas")
        let canvasBox = document.getElementById('imageWrapper')
        const width = canvasBox.offsetWidth
        const height = canvasBox.offsetHeight
        canvas.width = width * 2
        canvas.height = height * 2
        
        // 生成页面模糊时，可以放大一定倍数，通过调整canvas的宽高使其清晰度增加
        // const context = canvas.getContext("2d");
        // context.scale(1.5, 1.5);
​
        const options = {
          backgroundColor: null,
          canvas: canvas,
          useCORS: true
        };
​
        html2canvas(canvasBox, options).then((canvas) => {
          let dataURL = canvas.toDataURL("image/png");
          //下载
          this.downloadImage(dataURL);
          //显示
          var share = document.getElementById('shareImg');
          share.src = dataURL;
        })
      },
​
      downloadImage(url) {
        let link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", "截图.png");
        link.click();
      },

 

踩坑记录

1、截图区域存在网络图片时，会有跨域问题

解决方法：

(1) 将图片放置服务器，通过nginx进行代理资源，前端访问图片便不涉及到跨域问题

(2) 使用base64图片传输，base64太大不便于传输的话，让后端写一个接口，上传图片base64数据返回图片地址

2、在ios微信13.4.1上，出现无法截图的情况

微信社区帖子：https://developers.weixin.qq.com/community/develop/doc/00006eee95488060bb1ac5bd85b000

解决方法：换用1.0.0-rc.4版本。注意，要先把1.0.0-rc.5卸载了再装1.0.0-rc.4才有效

npm uninstall html2canvas
npm i html2canvas@1.0.0-rc.4

3、截图尺寸需要适配，不同容器上可能截图大小不一致。

4、其他

可能个别标签属性支持不够，不过我没碰到。

关于截图清晰度不够的问题，可以通过调整canvas来提高清晰度，若效果不明显，推荐另一个库 https://github.com/tsayen/dom-to-image，该库的清晰度比html2canvas高一些，不过对于标签属性的支持可能现在比不上html2canvas，毕竟这个库好几年没更新了，有时会出现截图失败的情况。

 

另外，分享两篇不错的博客

html2canvas截屏在H5微信移动端踩坑

html2canvas以及domtoimage的使用踩坑总结