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

У меня есть обычная HTML-страница с некоторыми изображениями (только обычные <img />HTML-теги). Я хотел бы получить их содержимое, желательно в кодировке base64, без необходимости повторной загрузки изображения (т. Е. Оно уже загружено браузером, поэтому теперь я хочу содержимое).

Я хотел бы добиться этого с Greasemonkey и Firefox.

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

Вам нужно будет создать элемент canvas с правильными размерами и скопировать данные изображения с помощью drawImageфункции. Затем вы можете использовать toDataURLфункцию для получения data: url с закодированным изображением 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")

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

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

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

Поэтому, если кто-то хочет версию образа для 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">

Более современная версия ответа Кайидо с использованием fetch:

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

Редактировать: Как указано в комментариях, это будет возвращать URL объекта, который указывает на файл в вашей локальной системе вместо фактического DataURL, поэтому в зависимости от вашего варианта использования это может быть не то, что вам нужно.

Вы можете посмотреть следующий ответ, чтобы использовать fetch и фактический dataURL: https://stackoverflow.com/a/50463054/599602

Шив / Шим / Шам

Если ваши изображения уже загружены (или нет), этот «инструмент» может пригодиться:

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

.. но почему?

Это дает преимущество использования «уже загруженных» данных изображения, поэтому дополнительный запрос не требуется. Aditionally это позволяет конечному пользователю (программисту , как вы) принимает решение о CORS и / или mime-typeи quality-ИЛИ- Вы можете оставить эти аргументы / параметры , как описано в MDN описании здесь .

Если у вас загружен этот JS (до того момента, когда он понадобится), то преобразовать в dataURLнего так же просто, как:

Примеры

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

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

Снятие отпечатков пальцев GPU

Если вас беспокоит «точность» битов, вы можете изменить этот инструмент в соответствии со своими потребностями, как указано в ответе @ Kaiido.

Используйте onloadсобытие для преобразования изображения после загрузки

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 лучше использовать это:

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