一、背景

项目中遇到一个问题：图像可以加载到 canvas 中查看，但是无法编辑。

二、问题梳理

通过执行如下 JavaScript 代码，我们尝试加载一个跨域的图像资源到 Canvas 中，并对其进行编辑操作：

js 复制代码

const image = new Image();
image.src = 'https://s11.ax1x.com/2023/01/30/pSdWF7F.png';
image.onload = () => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0);
    try {
        let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        console.log(imageData);
    } catch (error) {
        console.error("Cannot edit canvas data due to CORS policy: ", error);
    }
    document.body.appendChild(canvas);
};

如图所示，加载并尝试编辑图像时遇到 CORS 策略错误，阻止了对画布图像数据的编辑。

原因是当从一个域加载图像并尝试在另一个域的画布上使用它时，浏览器会检查该图像的服务器是否通过 Access-Control-Allow-Origin 响应头明确允许跨源使用。如果没有，浏览器会阻止对画布图像数据的访问，以保护用户的数据安全。

三、解决方案

解决跨域问题的一个简单方法是在请求图像资源之前设置图像的 crossOrigin 属性为 'anonymous'

js 复制代码

  image.crossOrigin = 'anonymous';

四、引入的问题

确保资源支持 CORS。

由于设置了crossOrigin，需要资源服务器设置 Access-Control-Allow-Origin 响应头。或者用代理服务器做一下转发，并添加相应的 CORS 头。
缓存问题。

在实际部署中，即使按照推荐流程配置了CORS，我仍遇到了问题。经过调查，发现问题的根源在于：在进行带有CORS头的图像请求之前，同一个图像已经在别处被请求过一次，但那次请求没有携带CORS头。这导致浏览器缓存了一个没有CORS头的图像版本，当后续尝试以CORS方式请求同一资源时，浏览器直接使用了这个缓存版本，导致失败。解决方法有两种：
1. 在所有请求的地方都加上 CORS 头
2. 在要加入 Canvas 的地方，在请求图像的URL后面添加一个随机参数或当前时间戳，以确保每次请求的URL都是唯一的，绕开缓存。例如：

js 复制代码

image.src = 'https://s11.ax1x.com/2023/01/30/pSdWF7F.png?timestamp=' + new Date().getTime();

前端图像跨域问题

一、背景

二、问题梳理

三、解决方案

四、引入的问题