Uzyskać adres URL danych obrazu w JavaScript?

Ta funkcja pobiera adres URL, a następnie zwraca obraz 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;
}

Nazwij to tak : getBase64FromImageUrl("images/slbltxt.png")

Nadchodzi długo po, ale żadna z odpowiedzi tutaj nie są całkowicie poprawne.

Po narysowaniu na płótnie, przekazany obraz jest nieskompresowany + wszystkie wstępnie pomnożone.
Po wyeksportowaniu jest nieskompresowany lub skompresowany za pomocą innego algorytmu i nie zwielokrotniony.

Wszystkie przeglądarki i urządzenia będą miały różne błędy zaokrąglania występujące w tym procesie
(zobacz Canvas fingerprinting ).

Więc jeśli ktoś chce wersję Base64 pliku graficznego, musi request it again (większość czasu będzie pochodzić z pamięci podręcznej), ale tym razem jako Blob.

Następnie możesz użyć FileReader , aby odczytać go jako ArrayBuffer lub jako 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">

Bardziej nowoczesna wersja odpowiedzi kaIdō za pomocą fetch brzmiałaby:

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

Edit: jak zaznaczono w komentarzach, zwróci To Adres URL obiektu, który wskazuje na plik w lokalnym systemie, a nie na rzeczywisty DataURL, więc w zależności od przypadku użycia może to nie być to, czego potrzebujesz.

Możesz spojrzeć na następującą odpowiedź, aby użyć fetch i rzeczywistego dataURL: https://stackoverflow.com/a/50463054/599602

Shiv / shim / sham

Jeśli Twoje obrazy są już załadowane (lub nie), to "narzędzie"może się przydać:

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

.. ale dlaczego?

Ta zaleta polega na wykorzystaniu "już załadowanych" danych obrazu, więc nie jest potrzebne dodatkowe żądanie. Dodatkowo pozwala użytkownikowi końcowemu (programiście jak ty) zdecydować CORS i/lub mime-type i quality -lub - możesz pominąć te argumenty/parametry, jak opisano w specyfikacji MDN tutaj.

Jeśli po załadowaniu tego JS (przed tym, kiedy jest to potrzebne), konwersja na dataURL jest tak prosta, jak:

Przykłady

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

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

GPU fingerprinting

Jeśli martwisz się o" dokładność " bitów, możesz zmienić to narzędzie, aby dopasować je do swoich potrzeb, zgodnie z odpowiedzią @Kaiido.

Użyj zdarzenia onload do konwersji obrazu po załadowaniu

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>

To wszystko, co musisz przeczytać.

Https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsBinaryString

var height = 200;
var width  = 200;

canvas.width  = width;
canvas.height = height;

var ctx = canvas.getContext('2d');

ctx.strokeStyle = '#090';
ctx.beginPath();
ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2);
ctx.stroke();

canvas.toBlob(function (blob) {
  //consider blob is your file object

  var reader = new FileReader();

  reader.onload = function () {
    console.log(reader.result);
  }

  reader.readAsBinaryString(blob);
});

W HTML5 lepiej Użyj tego:

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