Dapatkan url data gambar dalam JavaScript?

Saya memiliki halaman HTML biasa dengan beberapa gambar (hanya <img />tag HTML biasa ). Saya ingin mendapatkan konten mereka, lebih disukai encoding base64, tanpa perlu mengunduh ulang gambar (mis. Itu sudah dimuat oleh browser, jadi sekarang saya ingin konten).

Saya ingin mencapainya dengan Greasemonkey dan Firefox.

Catatan: Ini hanya berfungsi jika gambar berasal dari domain yang sama dengan halaman, atau memiliki crossOrigin="anonymous"atribut dan server mendukung CORS. Ini juga tidak akan memberi Anda file asli, tetapi versi yang disandikan ulang. Jika Anda ingin hasilnya identik dengan aslinya, lihat jawaban Kaiido .

Anda harus membuat elemen kanvas dengan dimensi yang benar dan menyalin data gambar dengan drawImagefungsinya. Kemudian Anda dapat menggunakan toDataURLfungsi untuk mendapatkan data: url yang memiliki gambar dasar-64 yang disandikan. Perhatikan bahwa gambar harus dimuat sepenuhnya, atau Anda hanya akan mendapatkan kembali gambar kosong (hitam, transparan).

Itu akan menjadi seperti ini. Saya tidak pernah menulis skrip Greasemonkey, jadi Anda mungkin perlu menyesuaikan kode untuk dijalankan di lingkungan itu.

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,/, "");
}

Mendapatkan gambar berformat JPEG tidak berfungsi pada versi Firefox yang lebih lama (sekitar 3,5), jadi jika Anda ingin mendukungnya, Anda perlu memeriksa kompatibilitasnya. Jika pengkodean tidak didukung, itu akan default ke "image / png".

Fungsi ini mengambil URL lalu mengembalikan gambar 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;
}

Sebut saja seperti ini: getBase64FromImageUrl("images/slbltxt.png")

Datang lama setelah itu, tetapi tidak ada jawaban di sini yang sepenuhnya benar.

Saat digambar di atas kanvas, gambar yang dikirimkan tidak dikompresi + semua telah dikalikan.
Saat diekspor, tidak terkompresi atau dikompresi dengan algoritma yang berbeda, dan tidak dikalikan.

Semua browser dan perangkat akan memiliki kesalahan pembulatan yang berbeda terjadi dalam proses ini
(lihat Kanvas sidik jari ).

Jadi jika seseorang menginginkan versi base64 dari file gambar, mereka harus memintanya lagi (sebagian besar waktu itu akan berasal dari cache) tetapi kali ini sebagai gumpalan.

Kemudian Anda bisa menggunakan FileReader untuk membacanya baik sebagai ArrayBuffer, atau sebagai 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">

Versi yang lebih modern dari jawaban Kaiido menggunakan fetch adalah:

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

Sunting: Seperti yang ditunjukkan dalam komentar, ini akan mengembalikan url objek yang menunjuk ke file di sistem lokal Anda alih-alih DataURL yang sebenarnya, jadi tergantung pada kasus penggunaan Anda, ini mungkin bukan yang Anda butuhkan.

Anda dapat melihat jawaban berikut untuk menggunakan pengambilan dan dataURUR yang sebenarnya: https://stackoverflow.com/a/50463054/599602

shiv / shim / sham

Jika gambar Anda sudah dimuat (atau tidak), "alat" ini mungkin berguna:

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

.. tapi kenapa?

Ini memiliki keuntungan menggunakan data gambar yang "sudah dimuat", jadi tidak diperlukan permintaan tambahan. Aditionally memungkinkan pengguna akhir (programmer seperti Anda) memutuskan CORS dan / atau mime-typedan quality-ATAU- Anda dapat meninggalkan argumen ini / parameter seperti yang dijelaskan dalam MDN spesifikasi di sini .

Jika JS Anda dimuat (sebelum saat diperlukan), maka mengonversi ke dataURLsesederhana:

contoh

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

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

Sidik jari GPU

Jika Anda khawatir tentang "ketepatan" bit maka Anda dapat mengubah alat ini sesuai dengan kebutuhan Anda sebagaimana disediakan oleh jawaban @ Kaiido.

Gunakan onloadacara untuk mengonversi gambar setelah memuat

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>

Di HTML5 lebih baik gunakan ini:

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