解决canvas使用oss图片绘制报错

使用 js 生成商品海报，在本地测试成功后，信心满满的放到线上，然鹅，报错了，报错信息如下：

1	Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at Image.goodsImage.onload

各种搜索后，结论是，因为线上是用了阿里云oss图片，属于跨域图片，需要解决如下几个地方。

step1. 修改阿里云oss设置

正在阿里云控制台->对象存储oss->选择存储空间->基础设置创建规则
创建跨域规则如下：

参数	参考值
来源	使用图片网站域名（来源可以设置多个，每行一个，每行最多能有一个通配符 *）
允许 Methods	GET
允许 Headers	access-control-allow-origin:*
暴露 Headers	可不填写
缓存时间（秒）	1

step2. 修改阿里云cdn设置

如果没有使用cdn请跳过。

正在阿里云控制台->CDN->域名管理->域名列表中管理->缓存配置->HTTP头添加

添加参数如下

参数	参考值
Access-Control-Allow-Origin	*

step3. js添加crossOrigin = “anonymous”

在new Image之后Image.onload之前添加crossOrigin = "anonymous"

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

var bgImg = new Image();// 背景图
bgImg.crossOrigin = "anonymous";
bgImg.src = 'image url';
bgImg.onload = function(){
    ctx.drawImage(bgImg , 0 , 0 , canvas.width , canvas.height);
}

这样，基本上解决了这个问题。

参考文档：

Apache server configuration file for CORS images

Allowing cross-origin use of images and canvas