JavaScript'te resim verileri URL'si mi aldınız?

Bazı resimlerle düzenli bir HTML sayfam var (sadece normal <img />HTML etiketleri). Görüntüsünü yeniden indirmeye gerek kalmadan, içeriklerini base64 kodlu olarak almak istiyorum (yani tarayıcı tarafından zaten yüklenmiş, bu yüzden şimdi içeriği istiyorum).

Bunu Greasemonkey ve Firefox ile başarmayı çok isterim.

Not: Bu yalnızca resim sayfa ile aynı alan adından geliyorsa veya crossOrigin="anonymous"özniteliğe sahipse ve sunucu CORS'yi destekliyorsa çalışır. Ayrıca orijinal dosyayı değil, yeniden kodlanmış bir sürümü verecektir. Sonucun orijinaliyle aynı olması gerekiyorsa, Kaiido'nun cevabına bakın .

Doğru boyutlara sahip bir tuval öğesi oluşturmanız ve görüntü verilerini drawImageişlevle kopyalamanız gerekir . Sonra toDataURLişlevi bir veri almak için kullanabilirsiniz : base-64 kodlu görüntüye sahip url. Resmin tam olarak yüklenmesi gerektiğini veya yalnızca boş (siyah, şeffaf) bir resim elde edeceğinizi unutmayın.

Böyle bir şey olurdu. Asla bir Greasemonkey betiği yazmadım, bu yüzden bu ortamda çalıştırmak için kodu ayarlamanız gerekebilir.

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 biçimli bir görüntü elde etmek Firefox'un eski sürümlerinde (yaklaşık 3.5) çalışmaz, bu nedenle bunu desteklemek istiyorsanız uyumluluğu kontrol etmeniz gerekir. Kodlama desteklenmiyorsa, varsayılan olarak "image / png" olarak ayarlanır.

Bu İşlev URL'yi alır ve ardından BASE64 resmini döndürür

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

Buna şöyle deyin: getBase64FromImageUrl("images/slbltxt.png")

Uzun zaman sonra geliyor, ama buradaki cevapların hiçbiri tamamen doğru değil.

Bir tuval üzerine çizildiğinde, iletilen görüntü sıkıştırılmamış + tümü önceden çoğaltılır.
Dışa aktarıldığında, farklı bir algoritma ile sıkıştırılmamış veya yeniden sıkıştırılmış ve çarpılmamış.

Tüm tarayıcılarda ve cihazlarda bu işlemde farklı yuvarlama hataları olacaktır.
(bkz. Kanvas parmak izi ).

Biri bir görüntü dosyasının base64 sürümünü istiyorsa, yeniden istemek (çoğu zaman önbellekten gelecektir) ama bu sefer bir Blob olarak.

Sonra bir ArrayBuffer veya dataURL olarak okumak için bir FileReader kullanabilirsiniz.

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'nun getirmeyi kullanarak cevabının daha modern bir versiyonu:

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

Düzenleme: Yorumlarda da belirtildiği gibi bu, gerçek bir DataURL yerine yerel sisteminizde bir dosyaya işaret eden bir nesne URL'si döndürür, bu nedenle kullanım durumunuza bağlı olarak ihtiyacınız olan şey olmayabilir.

Getirme ve gerçek verileri kullanmak için aşağıdaki cevaba bakabilirsiniz: URL: https://stackoverflow.com/a/50463054/599602

shiv / shim / sham

Resimleriniz zaten yüklüyse (veya yüklenmediyse), bu "araç" kullanışlı olabilir:

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

.. ama neden?

Bunun "önceden yüklenmiş" görüntü verilerini kullanma avantajı vardır, bu nedenle ekstra bir istek gerekmez. Aditionally o son kullanıcıya (sizin gibi programcı) karar vermenizi sağlar CORS'yi ve / veya mime-typeve quality-VEYA- bu argümanlar / anlatıldığı gibi parametreler göz bırakabilir MDN şartname burada .

Bu JS yüklüyse (gerektiğinde), dönüştürmek dataURLşu kadar basittir:

örnekler

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

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

GPU parmak izi

Bitlerin "kesinliği" konusunda endişeleriniz varsa, bu aracı @ Kaiido'nun cevabının sağladığı şekilde ihtiyaçlarınıza göre değiştirebilirsiniz.

Yükledikten onloadsonra görüntüyü dönüştürmek için etkinliği kullanma

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'te şunu kullanın:

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