html2canvas在IOS10中不渲染

Question

VUE项目，当前使用的微信中，已经拿到了base64的资源，但是在通过html2canvas进行渲染的时候无法进行渲染，查看报错原因是：error loading image，配置如下：

html2canvas(shareDom).then(
    canvas => {
        vm.shareImg = canvas.toDataURL()
    }
)

请问有谁遇到过类似的问题吗？

Answer 1

html2canvas，这个插件你装个老版本试试，我也遇到了一样的问题，用的老版本正常了，我用的是1.0.0.alpha12这个

Answer 2

原因就是图片没有加载成功，就开始执行html2cavnas 生成图片了。

所以在vue初始化时

data() {
    return {
        imgload: false,
    }
}

在 img 标签里添加 @load="imgload = true"

然后再监听 imgload 变化，加载完成后再执行 html2canvas 生成图片

Answer 3

then 之前图片都不存在的哦，有没有记得用 v-if 判断 dom 的渲染啊

Answer 4

把传入的图片的src不用base64的形式，改成http在线链接的形式或者Blob形式试一下。

// html2canvas 内部源码处理，在IOS10.2.1 上有一些问题。
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
 //ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous
if (isInlineBase64Image(src) || useCORS) {
    img.crossOrigin = 'anonymous';
}
img.src = src;
if (img.complete === true) {
    // Inline XML images may fail to parse, throwing an Error later on
    setTimeout(() => resolve(img), 500);
}
if (this._options.imageTimeout > 0) {
    setTimeout(
        () => reject(`Timed out (${this._options.imageTimeout}ms) loading image`),
        this._options.imageTimeout
    );
}

Answer 5

请问最后您是怎么解决的？