使用html2canvas将DOM导出为图片
Sonder
2022-10-08
1477字
4分钟
浏览 (2.3k)
背景：前段时间接到一个需求，有一个用户自定义上传的图片会频繁更改，但大多都是更改文本内容，
所以提出了制作几套模板针对不同的场景，用户可以输入、更改文本内容，然后生成图片保存。
实现方式
在网上搜索到《基于html2canvas实现网页保存为图片及图片清晰度优化》这篇文章，写的很详细，就参考实现了出来。
整体思路是用HTML实现对应的模板样式，然后用html2canvas这个开源库将Dom转化成canvas，最后用canvas的toDataURL()方法将canvas导出为图片。
直接上代码：
import html2canvas from 'html2canvas';
export default async function html2image(outputWidth = 1920, targetElementId = 'dom2image') {
const targetElement = document.querySelector(`#${targetElementId}`);
const targetWidth = targetElement.clientWidth;
const targetHeight = targetElement.clientHeight;
const scale = (outputWidth / targetWidth).toFixed(2);
const option = {
width: targetWidth,
height: targetHeight,
scale,
useCORS: true,
backgroundColor: 'rgba(0, 0, 0, 0)'
}
return new Promise((resolve, reject) => {
html2canvas(targetElement, option).then(function(canvas) {
const image = canvas.toDataURL('image/jpeg', 1);
resolve(image);
});
})
}整体还是比较简单的，传入Dom的Id、宽高、缩放比例、背景等，通过html2canvas将Dom转换为canvas，最后导出。
注意点：
- 跨域，如果导出的dom中包含图片，且图片与网站不是同源的（比如图片有CDN代理），则需要在option中添加useCORS，并在img标签上添加crossorigin=’anonymous’属性；
- 图片透明度，如果导出时需要保留透明度，就需要将导出格式更改为image/png，jpeg是不会存储透明度的，但是大小会相比png小很多，如果对透明度没有要求的建议导出为jpeg节省存储空间；
- 图片分辨率，上面的代码可以看的到，dom并不需要和实际导出的分辨率大小一样，可以通过设置scale来实现缩放。
参考文章：
【1】https://segmentfault.com/a/1190000011478657
【2】https://github.com/niklasvh/html2canvas
【3】https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL