web-dev-qa-db-ja.com

javascriptを使用して画像をblobに変換する

Promiseを使用して画像をダウンロードし、次のような画像データを取得します。

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

次のような画像があります。

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

画像をブロブに変換するにはどうすればよいですか？ （以下のスニペットに類似）

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

画像から[????]を取得/アクセスするにはどうすればよいですか？画像コンテキストを取得する方法がわかりません。

javascriptimageblob
14
caxieyou110

これは2つの方法で実行できます。

  • 画像要素の代わりにXMLHttpRequest()またはfetch()を使用して画像ソースをロードします
  • キャンバス要素を介して画像要素を変換します。これにより、画像が再圧縮され、品質がいくらか低下します。また、ICC /ガンマ情報が含まれている画像および/またはブラウザがこの情報をサポートしている画像に応じて、色/ガンマ変化の「リスク」があります。すなわち。画像は元の画像とまったく同じではありません-元の画像をblobとして表現する場合は、方法1を使用します。

方法1については、すでにpromiseを使用しているため、次のことができます。

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

次に、次のように画像をBlobとして取得します。

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

または fetch() in サポートするブラウザ を使用：

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

もう1つの方法では、キャンバスが必要です。

_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

このノードモジュールを試すことができます

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

または、画像をキャンバスに変換してから、blob uriに変換できます。

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

0
Mohammad shaban