html2canvas在IOS10中不渲染

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

clipboard.png

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

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

回答:

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

回答:

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

所以在vue初始化时

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

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

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

回答:

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

回答:

把传入的图片的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
    );
}

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注