记录一个html2canvas 使用中遇到的问题

html2canvas使用

1、html2canvas在vue中的使用

import html2canvas from 'html2canvas';
const convertToImage = (container, options = {}) => {
    const opts = {
        sacle: 3,
        useCORS: true,
        allowTaint: true,
        ...options
    };
    return html2canvas(container, opts).then(canvas) => {
        return canvas.toDataURL();
    }
}

2、遇到的问题

将element drawer中的一个dom元素通过html2canvas转换为图片时，图片出现白色边框。
在查看父子元素渲染顺序时，发现drawer比它内部的子元素先mounted，猜测出现上面的白边是因为执行转换函数时，子元素还没完全加载。

解决方法

在drawer的同级，增加一个与需要转换元素相同的dom结构，并隐藏它。当drawer打开时，保证需要转换的元素已经加载完成，这样在转换后就不会生成白边了