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

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. 前端 标签中添加crossOrigin = “Anonymous”属性

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

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