convert image into blob using javascript

问题

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)

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.

回答1:

You can do this in two ways:

Load the image source using XMLHttpRequest() or fetch() 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.

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:

loadXHR("url-to-image").then(function(blob) {
  // here the image is a blob
});

or use fetch() in browsers which support this:

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";

回答2:

You can try this node module

https://www.npmjs.com/package/image-to-blob

or you can convert image to canvas, then convert to blob uri:

https://github.com/blueimp/JavaScript-Canvas-to-Blob

来源：https://stackoverflow.com/questions/42471755/convert-image-into-blob-using-javascript

标签

javascript

image

blob