Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вывод изображения из blob (перевод blob в base64) (https://javascript.ru/forum/misc/38184-vyvod-izobrazheniya-iz-blob-perevod-blob-v-base64.html)

SpekToR 22.05.2013 21:16

Вывод изображения из blob (перевод blob в base64)
 
Ajax запросом получаю картинку, сохраняю ее в бд (sqlite) как blob. Но отобразить картинку не получается. Для кодирования в base64 использую https://github.com/yckart/jquery.bas...uery.base64.js
вот скрипт без использования бд:
$.ajax({
    url :   'http://site.com/337746%5B1%5D_0.jpg',
    async: false,
    type: 'GET',
    success: function(image){
        $('#myimg').attr('src','data:image/jpeg;base64,'+$.base64.encode(image));
    }
});

//Пробовал кодировать так:
image = window.btoa(unescape(encodeURIComponent(image)));

Encode дает какой-то похожий на base64 результат, но картинка не отображается (как будто url указана неправильно). Пробовал вставлять найденную в base64 png картинку, она отображается нормально. Значит вся загвоздка только в кодировании или при получении...
Также читал, что для кодирования можно использовать canvas.toDataURL(); но не понимаю как загрузить в canvas изображение. И если делать через canvas, то также хотел уточнить, работает он только с png?

dmitriymar 22.05.2013 22:17

а зачем это всё?
аяксом можно получить адрес картинки .
Сохранить его в базе? если необходимо .
Выводить на экран её с помощью стандартных методов, бекграундом, тегом img, канвой

Aetae 22.05.2013 22:23

https://developer.mozilla.org/en-US/...reateObjectURL

SpekToR 22.05.2013 22:33

Цитата:

Сообщение от dmitriymar (Сообщение 252205)
а зачем это всё?
аяксом можно получить адрес картинки .
Сохранить его в базе? если необходимо .
Выводить на экран её с помощью стандартных методов, бекграундом, тегом img, канвой

Делаю мобильное приложение (phonegap), которое получает данные с сервера и работает с ними в оффлайн режиме.

dmitriymar 22.05.2013 22:47

Цитата:

Сообщение от SpekToR
Делаю мобильное приложение (phonegap), которое получает данные с сервера и работает с ними в оффлайн режиме.

И что мешает загонять изображения в канву с сервера сразу и сохранять их base64 представление? -сложный вариант по сравнению с очевидным:
А phonegap с файлами не работает? не? http://docs.phonegap.com/en/2.7.0/co...e.md.html#File
И приложение не может брать графические файлы с файловой системой и корректно с ними работать?

SpekToR 22.05.2013 23:04

Да просто совсем не хочется работать с файлами, удаляя их каждый раз.
А с канвасом не особо понял как изображения загружать. Просто рисовать их?
// т.е. так загружаем в канвас:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(image,10,10);
// и получаем?
src=c.toDataURL();

И вообще, может я получаю данные неправильно?... Пробуя метод Aetae, написало, что не тот тип. Сделал alert(typeof image), вывело string... А в базу записывается нормально.

dmitriymar 22.05.2013 23:23

Цитата:

Сообщение от SpekToR
А с канвасом не особо понял как изображения загружать. Просто рисовать их?

а где то другие варианты описаны? только на канве нужно отрисовывать после полной загрузки изображения в объект изображения-это всё расписано на любом ресурсе по докам канвы

Aetae 22.05.2013 23:25

Откуда картинка изначально?

SpekToR 22.05.2013 23:44

Цитата:

Сообщение от Aetae (Сообщение 252219)
Откуда картинка изначально?

Из приложения делаю ajax запрос (приведенный выше) на сайт и получаю изображение. Попробую тогда через canvas.

Aetae 23.05.2013 00:24

Какая-то наркомания. =\


Часовой пояс GMT +3, время: 09:07.