5

可能重复：
如何将图像对象转换为二进制 blob

加载远程图像时，我面临同源策略限制。然而 DOM 0 Image 对象可用于加载远程资源（这与创建<img />标签本质上相同）。

var fr = new FileReader(),
    img = new Image();

img.src = 'http://distilleryimage8.s3.amazonaws.com/6cf25568491a11e2af8422000a9e28e9_7.jpg';

img.onload = function () {
    // how to get this image as a Blob object?
};

有没有办法将此资源读入 Blob/arraybuffer 对象？这不是如何将图像对象转换为二进制 blob的副本，因为后者不会出现同源问题。

4

1 回答 1

2

在我看来，它可以在没有太多痛苦的情况下完成......

你只需要一个 HTML5 元素。使用canvas时可以在其上绘制远程图像。之后获取图像 dataUrl 就很容易了，你可以从画布的 API 中获得这样的功能。下一步是使用 FileReader 的readAsDataURL方法。

我还没有尝试过，但理论上它应该可以工作。

  • 编辑：它不会工作。如果图像来自不同的来源，则不能使用画布的toDataURL方法。所以我认为没有服务器端没有任何解决方案。
于 2012-12-18T16:51:47.020 回答