前端图像跨域问题

一、背景

项目中遇到一个问题:图像可以加载到 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';

四、引入的问题

  1. 确保资源支持 CORS。

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

  2. 缓存问题。

    在实际部署中,即使按照推荐流程配置了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();
相关推荐
zhougl99627 分钟前
html处理Base文件流
linux·前端·html
花花鱼30 分钟前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_33 分钟前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷6 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript