如何将加载的图像读入blob？

Question

  

可能重复：
  How to convert an image object to a binary 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对象？这不是How to convert an image object to a binary blob的重复，因为后者不会出现同源问题。

Answer 1

在我看来，这可以毫不费力地完成......

您只需要一个HTML5元素。使用canvas时，您可以在其上绘制远程图像。在那之后获取图像dataUrl非常简单，你可以从canvas的API中获得这样的功能。下一步是使用FileReader的readAsDataURL方法。

我没有尝试过，但从理论上说它应该可行。

• 编辑：它不起作用。如果图像来自不同的原点，则无法使用canvas的toDataURL方法。所以我认为没有服务器端的解决方案。