总结一下使用html2canvas截图时遇到的问题

近期做需求，有个页面截图下载到本地的功能，这里记录一下使用html2canvas时遇到的问题，简单搭建了一个demo项目(项目地址)，用来调试当时遇到的问题。具体问题如下：

图片跨域问题
图片清晰度问题
图片样式缺失问题
长图截取不全问题

使用

安装

js 复制代码

npm install --save html2canvas

使用

html2canvas接收两个参数，分别是截取的目标dom元素和配置项，配置项非必传。调用html2canvas方法后，会返回一个绘制好的canvas对象，再通过调用canvas对象的toDataURL方法可以转换成一个图片。

js 复制代码

// 具体代码如下：
const canvas = await html2canvas(document.body, options); // options为对应的配置项
const code = canvas.toDataURL(); // 转换为Base64编码的字符串
const aLink = document.createElement('a'); // 创建a标签自动下载
aLink.download = '下载图片';
aLink.href = code;
aLink.click();

遇到的问题

1. 跨域问题

html2canvas配置项中自带了两个跟跨域相关的配置字段,分别是allowTaint和useCORS

1、allowTaint

由于html2canvas受浏览器同源策略的限制，使用非同源的图片会taint(污染)画布，因此默认allowTaint: false，不允许污染画布，同时图片也不能画在画布上。

在配置项中设置allowTaint: true,虽然会污染画布，但可以将跨域的图片渲染到画布上了。

js 复制代码

const canvas = await html2canvas(element, { allowTaint: true });

不过我不太推荐这种方式，因为它会导致另外一个问题，被污染的画布因为同源策略而存在安全问题 ，导致调用html2canvas后返回的canvas对象中toDataUrl、getImageData等方法会报错，从而没办法将canvas画布信息转换成base64格式的字符串了，这不符合我的预期。所以我将这个配置项pass掉，不用allowTaint，而是使用useCORS。

使用allowTaint属性后，报错如下：

2、useCORS

在配置项中设置useCORS：true，可以解决跨域问题，原理相同。

js 复制代码

const canvas = await html2canvas(element, { useCORS: true });

图片我用百度的图标当做网络图片，效果图如下：

未设置useCORS

设置useCORS

注意： allowTaint和useCORS不要同时使用，如果二者同时设置为true，仍然会认为画布已被污染而不可用。

2. 图片清晰度问题

通过配置项将scale属性对应的值调整大一点即可，我项目中设置的是4, 在html2canvas中scale默认值为浏览器设备像素比。

js 复制代码

const canvas = await html2canvas(element, { scale: 4 });

未设置scale和设置scale下载图片到本地后，通过下面这张图可以明显看出来，设置了scale的图片大小要比没有设置的大很多。

下面两张图是通过调整scale对应值的大小，图片的清晰度对比会更加明显一些。

设置scale: 0.8

设置scale: 4

3. 图片样式缺失问题

此问题的原因在于html2canvas有一些css样式是不支持的，导致截取出来的图片有部分样式缺失。因此写页面的时候只要自己注意一下就好了。

官方文档上面也有说明支持哪些css属性，不支持哪些css属性。具体详情可以点击传送门。

下面这些css属性是当前不支持的：

4. 长图截取不全问题

遇到这个问题的时候，当时查看官方文档没有找到对应的解决方案，后来自己调试样式，发现设置截图元素的高度就可以完美解决了。

解决方案：给要截图的元素设置height：fit-content。

效果图：

注意：fit-content有兼容行问题，使用的时候需要注意该属性是否符合你的目标浏览器的兼容性。

给截图元素不设置高度或者设置height: auto发现都不起作用，后来尝试使用fit-content这个相对较新的属性后，可以完美解决高度问题。

扩展知识

height: fit-content用于根据元素内容的大小来自动调整元素的高度。它允许你根据内容动态地设置元素的高度，而不是使用固定的像素值或百分比。（这段话来自chatGPT）

另外fit-content可以和min-height和max-height搭配使用。

与min-height搭配使用：当内容实际高度小于指定的最小高度时，元素的高度为min-height指定的高度，否则为元素的实际高度。。
与max-height搭配使用：当内容高度大于指定的最大高度时，元素的高度为max-height指定的高度，否则为元素的实际高度。

以上是我在做这个功能时遇到的问题，文中若有不对的地方欢迎各位掘友纠正~。

总结一下使用html2canvas截图时遇到的问题

使用

遇到的问题

1. 跨域问题

1、allowTaint

2、useCORS

2. 图片清晰度问题

3. 图片样式缺失问题

4. 长图截取不全问题

参考文章