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

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

Я хотел бы достичь этого с помощью Greasemonkey и Firefox.

301
base64 firefox greasemonkey image javascript

6 ответов

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

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

382

эта функция принимает 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")

69

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

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

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

Итак, если требуется версия изображения 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">
32

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

вместо этого используйте naturalWidth и naturalHeight, который использует изображение реального размера.

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

22

более современная версия ответа кайидо с использованием fetch будет:

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

10

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>
Вот рабочий пример скрипки: -загрузить и получить данные изображения
0