Canvas画布上绘制图片出现问题
使用Canvas动态生成图片,未能成功展示在页面上
报错信息
-
调用canvas.toDataURL() 提示
Failed to execute ‘toDataURL’ on ’HTMLCanvasElement’: Tainted canvased may not be exported -
在获取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成功之后进行绘制,由于图片为跨域图片,导致图片加载失败,从而无法完成图片的绘制。
解决方法
需要前后端配合
-
前端
<img>标签中添加crossOrigin = "Anonymous"属性 -
后端
在响应头部中添加:Access-Control-Allow-Origin:*
网友评论