踩坑图片生成dom-to-image

6,695 阅读1分钟

由节点转为图片的,现在常用的有两款插件,其中一个是html2canvas,以及dom-to-iamge.

html2canvase存在过大的兼容性问题,博主就考虑用 dom-to-image;

常规使用方式:

npm install dom-to-image

引入对应包。

常用方法(也可采用toSvg,toJpeg,toBlob,toPixelData)

toSvg//转化为Svg,Base64数据格式,可解决ios不兼容问题

toJpeg//转化为Jpeg文件

toBolb//转化为文件流

toPixelData//获取像素数据

domtoimage.toPng(node, {scale: 4, bgcolor: "#fff", width: (node?.clientWidth || 0), height: (node?.clientHeight || 0) }).then((url: any) => {})  .catch((error: any) => { console.log("error:", error)                            })

采用这个方式遇到的第一个问题:

生成的图片像素过于模糊,无法查看对应图像。

解决方案:

采用本地引入方式,单独拿取dom-to-image.js文件,对源文件进行修改。

修改代码模块:

记得:一定要带上scale参数,缩放倍数。

遇到第二个问题:ios兼容性问题,第一次加载元素,元素加载完毕,但生成的图片元素均为空白。

解决方案:

1,采用toSvg文件格式,但应用不支持该格式,放弃。

2,针对ios系统,该节点元素采用两次转化,调用两次toPng方法。可解决改问题