解决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"

1
2
3
4
5
6
7
8
9
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

坚持原创技术分享,您的支持将鼓励我继续创作!