美文网首页
使用Canvas动态生成分享图出现的问题总结

使用Canvas动态生成分享图出现的问题总结

作者: 勤劳的小叶 | 来源:发表于2018-09-11 09:56 被阅读0次

    Canvas画布上绘制图片出现问题

    使用Canvas动态生成图片,未能成功展示在页面上

    报错信息

    1. 调用canvas.toDataURL() 提示
      Failed to execute ‘toDataURL’ on ’HTMLCanvasElement’: Tainted canvased may not be exported

    2. 在获取CDN上的图片资源时,提示:
      Access to Image at 'https://shared-https.ydstatic.com/ke/wap/v1.7.14/.....png' from origin 'https://ke.youdao.com' has been bocked by CORS policy: No 'Access-Control-Allow-Origin' header is Present on the requested resource. Origin 'https://ke.youdao.com' is therefore not allowed access.

      报错截图

    问题原因

    Canvas中绘制了跨域图片。
    Canvas中绘制图片必须要在图片的load成功之后进行绘制,由于图片为跨域图片,导致图片加载失败,从而无法完成图片的绘制。

    解决方法

    需要前后端配合

    1. 前端
      <img>标签中添加crossOrigin = "Anonymous"属性

    2. 后端
      在响应头部中添加:Access-Control-Allow-Origin:*

    详细介绍见:Allowing cross-origin use of images and canvas

    相关文章

      网友评论

          本文标题:使用Canvas动态生成分享图出现的问题总结

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