Получить URL-адрес данных изображения в JavaScript?

Примечание. Это работает, только если изображение находится из того же домена, что и страница, или имеет атрибут crossOrigin="anonymous", а сервер поддерживает CORS. Он также не даст вам исходный файл, а даст вам перекодированную версию. Если вам нужно, чтобы результат был идентичен оригиналу, см. ответ Кайидо.

Вам нужно будет создать элемент холста с правильными размерами и скопировать данные изображения с помощью функции drawImage. Затем вы можете использовать функцию toDataURL для получения URL-адреса data: с изображением в кодировке base-64. Обратите внимание, что изображение должно быть полностью загружено, иначе вы просто получите пустое (черное, прозрачное) изображение.

Было бы что-то вроде этого. Я никогда не писал скрипт Greasemonkey, поэтому вам может потребоваться настроить код для работы в этой среде.

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 не работает в более старых версиях (около 3.5) Firefox, поэтому, если вы хотите поддерживать это, вам необходимо проверить совместимость. Если кодировка не поддерживается, по умолчанию используется «image / png».

Эта функция принимает URL-адрес, а затем возвращает изображение 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;
}

Назовите это так: getBase64FromImageUrl("images/slbltxt.png")

Придет много времени спустя, но ни один из ответов здесь не является полностью правильным.

При рисовании на холсте переданное изображение несжатое + все предварительно умножается.
При экспорте оно не сжимается или повторно сжимается с помощью другого алгоритма и не умножается.

Все браузеры и устройства будут иметь разные ошибки округления в этом процессе
(см. Canvas fingerprinting) .

Поэтому, если кому-то нужна версия файла изображения в формате base64, они должны снова запросить ее (в большинстве случаев она будет поступать из кеша), но на этот раз как Blob.

Затем вы можете использовать FileReader, чтобы читать его как ArrayBuffer или как 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">