如何将加载的图像读入blob？ [英] How to read loaded image into a blob?

问题描述

可能重复：

如何将图像对象转换为二进制blob

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

I am facing same-origin policy restrictions when loading remote images. However DOM 0 Image object can be used to load a remote resource (this is essentially the same as creating an <img /> tag).

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 ，因为后者不会出现同源问题。

Is there a way to read this resource into a Blob/arraybuffer object? This is not a duplicate of How to convert an image object to a binary blob as the latter does not rise with same-origin issues.

推荐答案

在我看来它可以完成没有太多痛苦...

In my opinion it can be accomplished without much pain...

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

You just need one more HTML5 element. When using canvas you can draw the remote image on it. After that getting the image dataUrl is quite easy, you have such function from the canvas's API. The next step is to use FileReader's readAsDataURL method.

我还没试过，但理论上它应该可行。

I haven't tried it but theoretically it should work.

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

• It won't work. If the image is from different origin you can't use canvas's toDataURL method. So I don't think there's any solution without server-side.

这篇关于如何将加载的图像读入blob？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！