it-swarm-id.com

Dapatkan data gambar dalam JavaScript?

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

Saya ingin mencapainya dengan Greasemonkey dan Firefox.

310
Detariael

Catatan: Ini hanya berfungsi jika gambar berasal dari domain yang sama dengan halaman, atau memiliki atribut crossOrigin="anonymous" 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 perlu membuat elemen kanvas dengan dimensi yang benar dan menyalin data gambar dengan fungsi drawImage. Kemudian Anda dapat menggunakan fungsi toDataURL untuk mendapatkan data: url yang memiliki gambar yang disandikan base-64. 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".

387
Matthew Crumley

Fungsi ini mengambil URL kemudian 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")

71
MuniR

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.
Ketika diekspor, tidak terkompresi atau dikompres ulang dengan algoritma yang berbeda, dan tidak dikalikan.

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

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

Kemudian Anda dapat 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">

40
Kaiido

Selain jawaban matthew, saya ingin mengatakan bahwa image.width dan image.height mengembalikan ukuran gambar yang ditampilkan (dan memotong gambar saat menggambar ke kanvas)

Gunakan naturalWidth dan naturalHeight sebagai gantinya, yang menggunakan gambar ukuran sebenarnya.

Lihat http://www.whatwg.org/specs/web-apps/current-work/multipage/edits.html#dom-img-naturalwidth

22
cube45

Versi yang lebih modern dari jawaban Kaiido menggunakan fetch adalah:

function toDataURL(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

11
Zaptree

Gunakan acara onload 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>
1

Di HTML5 lebih baik gunakan ini:

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

function encodeImageFileAsURL(cb) {
    return function() {
        var file = this.files[0];
        var reader = new FileReader();
        reader.onloadend = function() {
            cb(reader.result);
        }
        reader.readAsDataURL(file);
    }
}

$('#inputFileToLoad').change(encodeImageFileAsURL(function(base64Img) {
    $('.output')
        .find('textarea')
        .val(base64Img)
        .end()
        .find('a')
        .attr('href', base64Img)
        .text(base64Img)
        .end()
        .find('img')
        .attr('src', base64Img);
}));
@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'); body{ padding: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Input</h2>
<form class="input-group" id="img2b64">
    <input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
</form>
<hr>
Ini Bekerja Fiddle Contoh: - unggah & dapatkan Data Gambar

0
Parth Raval