前端图像跨域问题

一、背景

项目中遇到一个问题:图像可以加载到 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();
相关推荐
장숙혜6 分钟前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang8 分钟前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端11 分钟前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_14 分钟前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia15 分钟前
react 常用钩子 hooks 总结
前端·javascript·react.js
Mintopia24 分钟前
图形学中的数学基础与 JavaScript 实践
前端·javascript·计算机图形学
Mintopia30 分钟前
Three.js 制作飘摇的草:从基础到进阶的全流程教学
前端·javascript·three.js
BillKu31 分钟前
Vue3父子组件数据双向同步实现方法
前端·javascript·vue.js
红尘散仙1 小时前
七、WebGPU 基础入门——Texture 纹理
前端·rust·gpu
jaywongX1 小时前
Base64编码原理:二进制数据与文本的转换技术
前端·javascript·vue