javascript - 如何将加载的图像读入 blob?

标签 javascript html

<分区>

Possible Duplicate:
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 的副本因为后者不会随着同源问题而上升。

最佳答案

在我看来,它可以轻松完成......

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

我没试过,但理论上应该可以。

  • 编辑:它不会工作。如果图像来自不同来源,则不能使用 Canvas 的 toDataURL 方法。所以我不认为没有服务器端的任何解决方案。

关于javascript - 如何将加载的图像读入 blob?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13937494/

相关文章:

javascript - 如何设置按钮处理程序来删除父表行?

javascript - Overlay 100%覆盖IE中的TD

javascript - 在 HTML/JavaScript 中,有没有办法在图像开始加载时知道图像的最终布局尺寸?

html - 在 HTML 中显示角度符号

javascript - "{}"和 "new Object()"之间的区别

javascript - 即使使用 setJavascriptEnabled(true) 和 WebChromeClient,Android webview 也会跳过 javascript

javascript - 输入类型数字,只接受数字不接受字母 jquery

PHP 不再处理 html

javascript - 切换单击类的子级纯 Javascript - 无 JQuery

javascript - 如何使用图像数组创建拖放功能?