Uzyskać dane 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">

Oprócz odpowiedzi Mateusza, chciałbym powiedzieć, że obraz.szerokość i obraz.wysokość zwraca wyświetlony Rozmiar obrazu (i przycina obraz podczas rysowania go na płótnie)

Zamiast tego użyj naturalWidth i naturalHeight, które używają obrazu o rzeczywistych rozmiarach.

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

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

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

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>