Canvas生成图片存在跨域问题怎么办？快速解决！

4 min read

在使用Canvas生成图片时，如果涉及到跨域问题，可以通过以下两种方式解决：

  1. 服务端代理：将前端Canvas请求发送到后台服务端进行处理，然后返回给前端相应的数据流。

  2. 使用CORS（跨域资源共享）：在服务端设置Access-Control-Allow-Origin响应头，允许特定的域名或所有域名的请求。前端则需要将crossOrigin属性设置为anonymous或use-credentials来启用CORS。

以下是一个使用CORS的示例代码：

// 后台设置响应头
res.setHeader('Access-Control-Allow-Origin', '*');

// 前端设置crossOrigin属性
var img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'http://example.com/image.png';

// 绘制到Canvas中
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);