如何解决device.queue.copyExternalImageToTexture跨源数据污染问题（无需后端）

1. 将图片转为Data URI直接嵌入 #

这是完全无需服务器的方案，把PNG图片转换成base64格式的Data URI，直接写在代码里即可：

• 用在线转换工具或本地脚本（比如Node.js）将PNG转成base64编码的Data URI
• 在JS中创建图片元素时直接赋值该URI：

const img = new Image();
// 替换成你的图片对应的Data URI内容
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5gMVESkqQzkfSwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAUSURBVDjLY2AAAUYAAYMDBf2/h4AAAAASUVORK5CYII=';
img.onload = () => {
  // 此处调用device.queue.copyExternalImageToTexture
};

浏览器会将Data URI视为同源资源，不会触发跨域限制。

2. 通过FileReader读取本地图片（适合本地测试） #

如果图片是本地文件，可通过文件选择器让用户手动选择，再用FileReader转成可安全使用的资源：

<input type="file" accept="image/png" id="imgSelector">

document.getElementById('imgSelector').addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  const reader = new FileReader();
  reader.onload = (event) => {
    const img = new Image();
    img.src = event.target.result;
    img.onload = () => {
      // 执行copyExternalImageToTexture操作
    };
  };
  reader.readAsDataURL(selectedFile);
});

这种方式全程在浏览器本地处理，无跨域问题。

额外提醒 #

直接用file://协议打开本地HTML文件时，浏览器的同源策略限制极严，即便图片和HTML同目录也可能报错，因此优先选择上述两种方案。

内容的提问来源于stack exchange，提问作者shea