js img标签解决跨域

在使用 JavaScript 中的 `<img>` 标签加载跨域图片时，可能会遇到 "跨域问题" 的错误。这是因为浏览器在加载跨域图片时会应用同源策略，防止从其他域加载恶意代码。

为了解决这个问题，可以在服务器端设置响应头 `Access-Control-Allow-Origin`，允许特定域名访问图片。例如下面的代码设置允许 `https://example.com` 域名访问图片：

Access-Control-Allow-Origin: https://example.com

如果你无法在服务器端设置响应头，可以使用 JavaScript 动态创建一个 `<img>` 标签，并将图片 URL 转换为一个可以通过 JavaScript 跨域加载的 URL。代码示例如下：

var img = new Image();
img.crossOrigin = "anonymous";
img.src = "https://example.com/image.jpg";
img.onload = function() {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  var img2 = new Image();
  img2.src = dataURL;
  document.body.appendChild(img2);
};

这段代码创建了一个 `<img>` 标签，并将其 `crossOrigin` 属性设置为 "anonymous"，表示允许跨域请求。然后设置图片 URL 并等待加载完成。当图片加载完成后，使用 `<canvas>` 将图片绘制到 canvas 上，并将 canvas 转换为 base64 编码的数据 URI。最后创建另一个 `<img>` 标签，将数据 URI 设置为 `src` 属性，从而显示图片。这种方法可以通过 JavaScript 跨域加载图片，但需要注意的是，如果图片非常大，可能会导致内存不足的问题。