Javascript 使用javascript将图像转换为blob
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42471755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
convert image into blob using javascript
提问by caxieyou110
I use promise to download an image and get the image data like:
我使用承诺下载图像并获取图像数据，例如：
promise.downloadFile().then(function(image){
//do something
});
I have got the image, which is like:
我得到了图像，它是这样的：
<img name="imageXXX" crossorigin="" src="/images/grass.jpg">
how can I convert the image into a blob? (Similar to below snippet)
如何将图像转换为 blob？（类似于下面的片段）
var blob = new Blob([????], "image/jpg");
how can I get/access the [????] from the image ? I don't know how to get the image context.
如何从图像中获取/访问 [????] ？我不知道如何获取图像上下文。
回答by
You can do this in two ways:
您可以通过两种方式执行此操作：
- Load the image source using
XMLHttpRequest()orfetch()instead of an image element - Convert image element via a canvas element. This will recompress the image causing some quality loss. There is also the "risk" of color/gamma changes depending of the image contains ICC/gamma information and/or the browser support this information. Ie. the image won't be exact the same as the original - if you just want the original image to be represented as a blob, use method 1.
- 使用
XMLHttpRequest()或fetch()代替图像元素加载图像源 - 通过画布元素转换图像元素。这将重新压缩图像，导致一些质量损失。还存在颜色/伽马变化的“风险”，具体取决于图像包含 ICC/伽马信息和/或浏览器支持此信息。IE。图像不会与原始图像完全相同 - 如果您只想将原始图像表示为 blob，请使用方法 1。
For method one and since you're already using promises, you can do:
对于方法一并且由于您已经在使用承诺，您可以执行以下操作：
function loadXHR(url) {
return new Promise(function(resolve, reject) {
try {
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "blob";
xhr.onerror = function() {reject("Network error.")};
xhr.onload = function() {
if (xhr.status === 200) {resolve(xhr.response)}
else {reject("Loading error:" + xhr.statusText)}
};
xhr.send();
}
catch(err) {reject(err.message)}
});
}
Then get the image as Blob using it like this:
然后像这样使用它获取 Blob 图像：
loadXHR("url-to-image").then(function(blob) {
// here the image is a blob
});
or use fetch()in browsers which supportthis:
fetch("url-to-image")
.then(function(response) {
return response.blob()
})
.then(function(blob) {
// here the image is a blob
});
The other method will require a canvas:
另一种方法将需要一个画布：
var img = new Image;
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
img.onload = function() {
c.width = this.naturalWidth; // update canvas size to match image
c.height = this.naturalHeight;
ctx.drawImage(this, 0, 0); // draw in image
c.toBlob(function(blob) { // get content as JPEG blob
// here the image is a blob
}, "image/jpeg", 0.75);
};
img.crossOrigin = ""; // if from different origin
img.src = "url-to-image";
回答by Mohammad shaban
You can try this node module
你可以试试这个节点模块
or you can convert image to canvas, then convert to blob uri:
或者您可以将图像转换为画布，然后转换为 blob uri：
