本文知乎地址-知不道者
如何使用
html2canvas(document.querySelector("#capture")).then(canvas => {
console.log(canvas);
});
大家是否在使用的过程中遇到了白图、跨域、ios不触发then、iframe多次触发等问题,是不是很烦
白图问题
原因:由于页面的滚动,元素fixed
解决:设置参数y值为目标元素顶部距窗口的距离+滚动距离
html2canvaas(ele,{
y: ele.getBoundingClientRect().top + window.scrollY
})
如果是里面有资源图缺失,那么就是资源未加载完,需要监测资源图加载完毕之后执行
跨域
html2canvaas(ele,{
useCORS: true,
y: ele.getBoundingClientRect().top + window.scrollY
})
但是,如果你遇到有的图片还是跨域的话,那么需要使用canvas去把跨域的图片转成base64
const getBase64Image = (src: string) =>
new Promise((resolve, reject) => {
const img = document.createElement('img');
img.crossOrigin = '';
img.src = src;
img.onload = () => {
const canvas = document.createElement('canvas');
const ratio = window.devicePixelRatio || 2;
const width = img.width * ratio;
const height = img.height * ratio;
canvas.width = width;
canvas.height = height;
const ctx: any = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
try {
resolve(canvas.toDataURL('image/jpeg', 0.9)); // 这里是为了降低图片大小
} catch (error) {
reject(error);
}
};
});
ios不触发then
使用1.0.0-rc.4版本,就酱紫
iframe多次触发
这是由于它遍历了所有的标签对其进行操作了,这其中包括了iframe,不知道会不会有其他src资源也这样,具体什么操作得看看源码,但是怎么解决呢,这个插件还是挺贴心的
html2canvaas(ele,{
useCORS: true,
y: ele.getBoundingClientRect().top + window.scrollY,
ignoreElements: (element: any) => {
if (element.tagName.toLowerCase() === 'iframe') {
return element;
}
return false;
},
})
以上是使用html2canvas时遇到的坑,欢迎大家留言自己遇到的问题,一起讨论一下
本文知乎地址-知不道者