如何在 JavaScript 中处理来自另一个域的图像？

Posted 2023-02-27

【中文标题】如何在 JavaScript 中处理来自另一个域的图像？

【英文标题】：How to process an image from another domain in JavaScript?

【发布时间】：2021-11-27 05:32:00

【问题描述】：

有没有什么好的方法可以将图像从另一个域中的网页拖放到我的网页中，然后对数据进行一些处理？

我尝试了多种方法，但我尝试的每一种方法似乎都遇到了跨域相关的限制。

我可以理解，不运行来自外国服务器的脚本。

但鉴于以下情况，我看不出检查图像数据会带来任何额外的安全问题。

该图像无需任何凭据即可公开获取。 用户已经可以在原网站上看到图片了。 用户已经可以根据需要右键单击并保存图像，保存后将其拖放到我的网页中并进行相同的处理。我只是想为他们节省这一步。 如果我想将图像加载到我的网页中然后在那里绘制，浏览器会在我的网页上显示外部图像。 如果我想向用户展示图像的更改版本，我仍然可以轻松地做到这一点，只需在其上覆盖另一个透明画布并在其上绘图。 浏览器不允许某人处理外来图像这一事实并不能阻止某人制作桌面应用程序，该应用程序可以从相同的 URL 中提取图像并对其进行任何操作。

如果我已经可以完成所有这些事情，那么我的脚本从图像中读取颜色数据有什么安全问题？如果我发现坐标 (55, 73) 处的像素颜色为红色，可能会发生什么坏事？可能导致哪些安全攻击？

【参考方案1】：

不，我不认为有办法用 javascript 做到这一点。

关于这一点：

如果需要，用户已经可以右键单击并保存图像，保存后将其拖放到我的网页中并进行相同的处理。我只是想为他们节省这一步。

您可以自动将该图像下载到您的服务器并在其上处理该图像。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

我曾考虑通过创建一个虚拟锚 标记将图像下载到我的服务器，然后将其从新位置加载回页面。我希望避免存储任何用户数据，但也许无济于事。如果我采用这种方法，我就会遇到删除旧文件的新问题（我显然也不能直接从 JavaScript 中完成）。

【参考方案2】：

创建一个 dropzone 元素（我使用了一个元素，但您可以创建一个不同的元素）：

<main></main>
<script>
  const dropzone = document.querySelector('main');
</script>

给 dropzone 一个虚线边框样式：

<style>
  main 
    border: 1px border lightgray;
    width: 100px;
    height: 100px;
  
</style>

在触发 dragenter 事件时突出显示 dropzone（图像被拖到 dropzone 上）：

<style>
  .active 
    border: 1px dashed black;
  
</style>

<script>
  // ...
  dropzone.addEventListener('dragenter', event => 
    event.preventDefault();
    dropzone.classList.add('active');
  );

event.preventDefault() is necessary or else the image will be opened from your local file explorer.

在触发 dragleave 事件时移除 dropzone 突出显示（图像不再拖到 dropzone 上）：

<script>
  // ...
  dropzone.addEventListener('dragleave', event => 
    event.preventDefault();
    dropzone.classList.remove('active');
  );
</script>

必须在 drop 发生之前处理 dragover 事件：

<script>
  // ...
  dropzone.addEventListener('dragover', event => 
    event.preventDefault();
  );
</script>

现在处理 drop 事件（当图像在 dropzone 内释放时）：

<script>
  // ...
  dropzone.addEventListener('drop', event => 
    event.preventDefault();
    dropzone.classList.remove('active');

    const file = event.dataTransfer.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);

    reader.addEventListener('loadend', () => 
      const img = document.createElement('img');
      img.src = reader.result;
      dropzone.append(img);
    );
  );
</script>