html2canvas库的使用教程以及一些问题解决方案

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

简介

翻译自官网

1、介绍

该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。

2、运作

该脚本遍历它所加载的页面的 DOM。它收集那里所有元素的信息，然后使用这些信息来构建页面的表示。换句话说，它实际上并没有截取页面的屏幕截图，而是根据它从 DOM 读取的属性构建它的表示。

结果，它只能正确渲染它理解的属性，这意味着有许多 CSS 属性不起作用。有关支持的 CSS 属性的完整列表，请查看 支持的功能页面。

3、限制

脚本使用的所有图像都需要位于同一源下，以便无需代理 的帮助即可读取它们。同样，如果canvas 页面上有其他元素被跨域内容污染，它们将被污染并且不再被 html2canvas 读取。

该脚本不支持插件内容，例如 Flash 或 Java 小程序。

4、浏览器兼容性

该库应该可以在以下浏览器上正常工作（使用Promisepolyfill）：

1. 火狐 3.5+
2. 谷歌浏览器
3. Opera 12+
4. IE9+
5. Edge
6. Safari 6+

官方地址

html2canvas.hertzen.com/

使用方法

1. 先安装包，安装方法可以使用npm或者yarn

Install NPM
`npm install --save html2canvas`

或者使用

###### Install Yarn
`yarn add html2canvas`

引入文件

import html2canvas from 'html2canvas';

使用方法，以vue项目为例

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});
// 也可以写成
const screenEl: any = document.getElementById('Screen');
html2canvas(screenEl, {
    useCORS: true,
    dpi:150,
    scale:2,
})
.then((canvas: any) => {
    // 生成的canvas
});

遇到的问题

1、透明边框问题

问题描述：

元素边框设置为透明时，生成的图片上透明度不是100%，会有白色的小边框，每次生成的透明度还都不一样。

解决思路：

网上找个很多方法，将透明色使用rgba模式或者transparent都没有效果。由于是透明边框，生成图片时就将透明边框去掉，但为了不改变元素样式，添加相应宽度的padding。问题得到解决，如果有更好的方法欢迎交流指正。

2、生成字体下沉对不齐的问题

问题描述：

页面中使用到多种字体，在谷歌浏览器上，生成图片时有的字体会下沉。

解决思路：

每种字体包的字体行高不一样，html2canvas在绘制文字时属性textBaseline使用的默认值是alphabetic(普通的字母基线)在转换的时候就会出现问题。

需要在源码中修改textBaseline的属性值ideographic(表意基线)

js代码如下

_this.ctx.textBaseline = 'ideographic'

插入在源码的第6200行的位置，示意图如下

3、生成的图片像素问题

问题描述：

在window系统下载的图片要比mac环境下小很多，存在失真的现象。

解决思路： 主要考虑到是分辨率问题，另外就是图片的大小问题。html2canvas在配置参数中可以设置dpi参数，以及scale。刚开始dpi值设置的是300，导致生成的图片特别大。可以将dpi值设置到150，可以满足电子设备的使用，生成的图片体积也不会过大。

js代码如下：

html2canvas(screenEl, {
    useCORS: true,
    dpi:150,
    scale:2,
})
    .then((canvas: any) => {
    })