JavaScriptで画像データのURLを取得しますか？

いくつかの画像（通常の<img />HTMLタグのみ）を含む通常のHTMLページがあります。画像を再ダウンロードする必要なく、base64でエンコードされたコンテンツを取得したいと考えています（つまり、ブラウザーによって既にロードされているため、コンテンツが必要です）。

GreasemonkeyとFirefoxでそれを実現したいです。

注：これは、画像がページと同じドメインからのものであるか、crossOrigin="anonymous"属性があり、サーバーがCORSをサポートしている場合にのみ機能します。また、元のファイルではなく、再エンコードされたバージョンが提供されます。結果を元と同じにする必要がある場合は、海道の回答を参照してください。

正しい寸法のキャンバス要素を作成し、drawImage関数を使用して画像データをコピーする必要があります。次に、toDataURL関数を使用して、base-64でエンコードされた画像を含むdata：urlを取得できます。画像は完全に読み込まれている必要があります。そうしないと、空の（黒の透明な）画像が返されます。

こんな感じになります。私はGreasemonkeyスクリプトを書いたことがないので、その環境で実行するようにコードを調整する必要があるかもしれません。

function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
    // guess the original format, but be aware the using "image/jpg"
    // will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

JPEG形式の画像の取得は、Firefoxの古いバージョン（約3.5）では機能しないため、サポートする場合は、互換性を確認する必要があります。エンコードがサポートされていない場合、デフォルトで「image / png」になります。

この関数はURLを取得し、画像BASE64を返します

function getBase64FromImageUrl(url) {
    var img = new Image();

    img.setAttribute('crossOrigin', 'anonymous');

    img.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width =this.width;
        canvas.height =this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);

        var dataURL = canvas.toDataURL("image/png");

        alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
    };

    img.src = url;
}

次のように呼び出します。 getBase64FromImageUrl("images/slbltxt.png")

長い間出てきますが、ここでの答えはどれも完全に正しいものではありません。

キャンバスに描画されるとき、渡された画像は圧縮されていない+すべて事前に乗算されています。
エクスポートされると、非圧縮または別のアルゴリズムで再圧縮され、乗算されません。

すべてのブラウザーとデバイスで、このプロセスで発生する異なる丸めエラーが発生します
（Canvasフィンガープリントを参照）。）。

したがって、画像ファイルのbase64バージョンが必要な場合は、再度要求する必要があります（ほとんどの場合、キャッシュから取得されます）が、今回はBlobとして要求します。

次に、FileReaderを使用して、ArrayBufferまたはdataURLとして読み取ることができます。

function toDataURL(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.open('get', url);
    xhr.responseType = 'blob';
    xhr.onload = function(){
      var fr = new FileReader();
    
      fr.onload = function(){
        callback(this.result);
      };
    
      fr.readAsDataURL(xhr.response); // async call
    };
    
    xhr.send();
}

toDataURL(myImage.src, function(dataURL){
  result.src = dataURL;

  // now just to show that passing to a canvas doesn't hold the same results
  var canvas = document.createElement('canvas');
  canvas.width = myImage.naturalWidth;
  canvas.height = myImage.naturalHeight;
  canvas.getContext('2d').drawImage(myImage, 0,0);

  console.log(canvas.toDataURL() === dataURL); // false - not same data
  });

<img id="myImage" src="https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png" crossOrigin="anonymous">
<img id="result">

フェッチを使用した、より新しいバージョンのkaiidoの回答は次のようになります。

function toObjectUrl(url) {
  return fetch(url)
      .then((response)=> {
        return response.blob();
      })
      .then(blob=> {
        return URL.createObjectURL(blob);
      });
}

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

編集：コメントで指摘されているように、これは実際のDataURLではなくローカルシステム内のファイルを指すオブジェクトURLを返すため、ユースケースによってはこれが必要なものではない場合があります。

あなたはフェッチと実際のdataURLを使用するために次の答えを見ることができます：https ://stackoverflow.com/a/50463054/599602

シブ/シム/シャム

画像が既にロードされている（またはロードされていない）場合は、この「ツール」が便利です。

Object.defineProperty
(
    HTMLImageElement.prototype,'toDataURL',
    {enumerable:false,configurable:false,writable:false,value:function(m,q)
    {
        let c=document.createElement('canvas');
        c.width=this.naturalWidth; c.height=this.naturalHeight;
        c.getContext('2d').drawImage(this,0,0); return c.toDataURL(m,q);
    }}
);

.. しかし、なぜ？

これには、「ロード済み」の画像データを使用できるという利点があるため、追加のリクエストは必要ありません。さらに、エンドユーザー（プログラマーのような）がCORSを決定したりmime-type、-OR-を使用したりして、qualityこれらの引数/パラメーターをここのMDN仕様で説明されているように省略することができます。

このJSがロードされている場合（必要なときより前）、変換dataURLは次のように簡単です。

例

<img src="/yo.jpg" onload="console.log(this.toDataURL('image/jpeg'))">

console.log(document.getElementById("someImgID").toDataURL());

GPUフィンガープリント

ビットの「正確さ」が気になる場合は、@ Kaiidoの回答で示されているように、このツールをニーズに合わせて変更できます。

使用するonloadロード後に変換イメージにイベントを

function loaded(img) {
  let c = document.createElement('canvas')
  c.getContext('2d').drawImage(img, 0, 0)
  msg.innerText= c.toDataURL();
}

pre { word-wrap: break-word; width: 500px; white-space: pre-wrap; }

<img onload="loaded(this)" src="https://cors-anywhere.herokuapp.com/http://lorempixel.com/200/140" crossorigin="anonymous"/>

<pre id="msg"></pre>

HTML5では、これをより適切に使用します。

{
//...
canvas.width = img.naturalWidth; //img.width;
canvas.height = img.naturalHeight; //img.height;
//...
}