美文网首页
vue中html2canvas图片跨域问题解决办法

vue中html2canvas图片跨域问题解决办法

作者: 茶饭不思 | 来源:发表于2022-03-02 15:13 被阅读0次

    html2canvas在截图的过程中,如果遇到html中有跨域的图片,比如图片存在了别人的云上,截图的时候将不会显示图片,解决方案如下: Js部分


    image.png

    html代码部分


    在img标签中增加crossOrigin标签

    需要注意的点:
    1、allowTaint: true 和 useCORS: true 都是解决跨域问题的方式,不同的是使用allowTaint 会对canvas造成污染,导致无法使用canvas.toDataURL 方法,所以这里不能使用allowTaint: true
    2、在跨域的图片里设置 crossOrigin="anonymous" 并且在给图片img标签中src属性传图片地址的时候,需要在图片地址后面拼接上一个随机字符串
    3、canvas.toDataURL('image/jpg') 是将canvas转成base64图片格式。
    4、如果是用的阿里云或者其他云平台的oss对象存储,还需要在对应的平台上设置一下跨域

    相关文章

      网友评论

          本文标题:vue中html2canvas图片跨域问题解决办法

          本文链接:https://www.haomeiwen.com/subject/chzsrrtx.html