webentwicklung-frage-antwort-db.com.de

Bild mit Javascript in Blob umwandeln

Ich verwende Versprechen, um ein Bild herunterzuladen und die Bilddaten zu erhalten, wie:

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

Ich habe das Bild, das so aussieht:

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

wie kann ich das Bild in einen Blob konvertieren? (Ähnlich wie unter Schnipsel)

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

wie kann ich das [????] aus dem Bild abrufen/darauf zugreifen? Ich weiß nicht, wie ich den Bildkontext erhalten soll.

14
caxieyou110

Sie können dies auf zwei Arten tun:

  • Laden Sie die Bildquelle mit XMLHttpRequest() oder fetch() anstelle eines Bildelements
  • Bildelement über ein Canvas-Element konvertieren. Dadurch wird das Bild erneut komprimiert, was zu Qualitätsverlusten führt. Es besteht auch das "Risiko" von Farb-/Gammaveränderungen, abhängig davon, ob das Bild ICC-/Gammainformationen enthält und/oder der Browser diese Informationen unterstützt. Dh Das Bild stimmt nicht mit dem Original überein. Wenn das Originalbild nur als Klecks dargestellt werden soll, verwenden Sie Methode 1.

Für Methode eins und da Sie bereits Versprechen verwenden, können Sie Folgendes tun:

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

Dann erhalten Sie das Bild als Blob, indem Sie es folgendermaßen verwenden:

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

oder benutze fetch() in Browser die dies unterstützen :

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

Die andere Methode erfordert eine Zeichenfläche:

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

Sie können dieses Knotenmodul ausprobieren

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

oder Sie können das Bild in eine Leinwand konvertieren und dann in ein Blob-Uri konvertieren:

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

0
Mohammad shaban