Obtener datos de imagen en JavaScript?

Esta función toma la URL y luego devuelve la imagen 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;
}

Llámalo así : getBase64FromImageUrl("images/slbltxt.png")

Viene mucho después, pero ninguna de las respuestas aquí son del todo correctas.

Cuando se dibuja en un lienzo, la imagen pasada se descomprime + todo se pre-multiplica.
Cuando se exporta, se descomprime o recomprime con un algoritmo diferente, y se descomprime.

Todos los navegadores y dispositivos tendrán diferentes errores de redondeo que ocurren en este proceso
(ver Huellas dactilares de lienzo ).

Así que si uno quiere una versión base64 de un archivo de imagen, tienen que request it again (most of the time it will come from cache) but this time as a Blob.

Entonces puede usar un FileReader para leerlo como un ArrayBuffer, o como un 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">

Además de la respuesta de Matthew, me gustaría decir esa imagen.ancho e imagen.altura devuelve el tamaño mostrado de la imagen (y recorta la imagen al dibujarla en el lienzo)

Utilice naturalWidth y naturalHeight en su lugar, que utiliza la imagen de tamaño real.

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

Una versión más moderna de la respuesta de kaiido usando fetch sería:

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>