JavaScript сериализует изображение (значок)

Я создаю расширение в CrossRider. Мне нужно сохранить изображения/значки, URL которых у меня есть, в базе данных. Это крошечные изображения, и они не будут проблемой в базе данных. У меня может быть что-то подобное, доступное для background.js:

<img src="http://something.com/icon.ico" alt="icon">

И я хочу иметь возможность сериализовать это изображение в базу данных (это база данных ключ/значение), а затем десериализовать его и отобразить. Что-то вроде HTML5 FileReader.readAsDataUrl() будет хорошо, но я не могу использовать этот метод, потому что он кажется слишком привязанным к формам.

Спасибо ([-|).


javascript crossrider
person MadeOfAir    schedule 19.12.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Преобразование Base64 для отображения изображения не требуется:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://g.etfv.co/http://www.google.com', true);
xhr.responseType = 'blob';
xhr.onload = function (e) {
    var icon_blob = xhr.response; //That can be saved to db
    var fr = new FileReader();
    fr.onload = function(e) {
        document.getElementById('myicon').src = fr.result; //Display saved icon
    };
    fr.readAsDataURL(icon_blob);
};
xhr.send(null);

Вот это на JSFiddle.

person MadeOfAir    schedule 21.12.2013

arrow_upward
1
arrow_downward

Одно из решений может состоять в том, чтобы нарисовать изображение на холсте, а затем использовать .toDataURL(). См. Как получить строку байтов изображения (base64) в html5, jquery, javascript? например.

Вы также можете получать двоичные данные через AJAX. Новые браузеры могут использовать XMLHttpRequest для получения ArrayBuffer (по сути, массива байтов). Дополнительные сведения см. в разделе MDN: отправка и получение двоичных данных. информация о том. Как упоминалось в этой статье, двоичные данные также можно получить, установив .overrideMimeType('text\/plain; charset=x-user-defined') в запросе AJAX. Последний метод работает в старых браузерах и с функциями AJAX jQuery. Однако любой тип AJAX потребует от вас обойти политику одного и того же источника (например, путем создания серверной веб-службы, которая извлекает/проксирует изображения и добавляет HTTP-заголовок Access-Control-Allow-Origin: *).

Пример двоичного AJAX: http://jsfiddle.net/te7L4/

person quietmint    schedule 19.12.2013
comment
Что ж, я рассмотрел оба варианта, но ни один из них не подходит, потому что изображение находится в другом домене. Первое решение не работает с предупреждениями безопасности, а второе не работает из-за ошибки same origin policy. Есть еще идеи, пожалуйста? - person MadeOfAir; 21.12.2013
comment
@MadeOfAir Можете ли вы создать серверную службу для извлечения/проксирования значков? Если вы отправляете заголовок HTTP Access-Control-Allow-Origin: * с ответом, вы можете обойти ту же политику происхождения (Общий доступ к ресурсам из разных источников). Если это фавиконки, то по адресу g.etfv.co существует сервис, который делает именно это. - person quietmint; 21.12.2013
comment
Хорошо, я приближаюсь. Но я не знаю, какие данные я получаю с таким запросом $.get("http://g.etfv.co/http://www.google.com", function(data)...);. Я пробовал несколько преобразований, предполагая, что данные являются двоичными, преобразовал их в шестнадцатеричную строку, затем использовал hexToBase64(), указанный здесь, добавленные данные: image/x-icon;base64, но это не сработало. - person MadeOfAir; 21.12.2013
comment
Функции AJAX @MadeOfAir jQuery не могут дать вам ArrayBuffer. Вам либо нужно использовать родной XMLHttpRequest, либо вы можете использовать кодировку, упомянутую в статье. Я опубликовал пример, показывающий каждую технику. - person quietmint; 21.12.2013
comment
Я думаю, что я не уточнил себя. Мне нужно отобразить этот значок, а также сохранить его в базе данных. Я отредактировал вопрос выше. В любом случае, опубликованный вами метод позволяет мне получить значок в виде байтов, и мне нужно это в строке base64, чтобы я мог установить его как img.src, верно? Тогда, возможно, тип данных blob больше подходит, чем bytearray. - person MadeOfAir; 22.12.2013