web-dev-qa-db-fra.com

convertir une image en blob en utilisant javascript

J'emploie la promesse de télécharger une image et d'obtenir les données d'image comme:

promise.downloadFile().then(function(image){                
    //do something
});

J'ai l'image, qui ressemble à:

<img name="imageXXX" crossorigin="" src="/images/grass.jpg">

comment puis-je convertir l'image en une goutte? (Similaire à l'extrait ci-dessous)

var blob = new Blob([????], "image/jpg");

comment puis-je obtenir/accéder au [????] à partir de l'image? Je ne sais pas comment obtenir le contexte de l'image.

javascriptimageblob
14
caxieyou110

Vous pouvez le faire de deux manières:

  • Chargez la source d'image en utilisant XMLHttpRequest() ou fetch() à la place d'un élément d'image
  • Convertir un élément d'image via un élément de toile. Cela recompressera l'image, ce qui entraînera une perte de qualité. Il y a aussi le "risque" de changement de couleur/gamma selon l'image qui contient des informations ICC/gamma et/ou le navigateur prend en charge cette information. C'est à dire. l'image ne sera pas exactement identique à l'original - si vous souhaitez simplement que l'image d'origine soit représentée sous forme de blob, utilisez la méthode 1.

Pour la première méthode et puisque vous utilisez déjà des promesses, vous pouvez faire:

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)}
    });
}

Ensuite, obtenez l'image en tant que Blob en l'utilisant comme ceci:

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

ou utilisez fetch() dans navigateurs compatibles ceci:

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

L'autre méthode nécessitera une toile:

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

Vous pouvez essayer ce module de noeud

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

ou vous pouvez convertir une image en toile, puis convertir en blob uri:

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

0
Mohammad shaban