Отображение изображений в Sencha Touch с учетом дайджеста

Моя цель - отобразить изображение в Sencha Touch 2.

На данный момент я делаю что-то вроде этого:

{
    xtype:'image',
    src: 'resources/icons/default_avatar.png',
    height: 256,
    width: 256
}

В будущем я хочу получить эти изображения из базы данных.

В PouchDB это выглядит так:

"avatar.png": {
      "content_type": "image/png",
      "digest": "md5-ewjS8WP/imog6RFh07xqHg==", <-- altered
      "length": 10741,
      "data": "abe24==" <-- made this up; too long to paste
    }

Я пытаюсь выполнить следующее:

Скажем, есть 2 кнопки (идентификаторы: ['b1', 'b2']. Когда я нажимаю на одну, я попадаю на другую страницу и вижу изображение, соответствующее нажатой кнопке.

Я ищу «b1» в базе данных и нахожу изображение base64. Как я могу это отобразить? Похоже, что свойство «src» предназначено только для URL-адресов.


couchdb pouchdb sencha-touch sencha-touch-2
person pushkin    schedule 26.06.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать blob-util для преобразования вложений, хранящихся в PouchDB, в пригодные для использования теги <img/>.

db.getAttachment() вернет вам Blob, а затем используйте createObjectURL, чтобы преобразовать большой двоичный объект в URL-адрес, который вы можете использовать.

Конечно, вы также можете использовать строки base64 и преобразовать их в URL-адрес данных (blob-util также предлагает эту функцию), но это гораздо менее эффективно, чем работа напрямую с большими двоичными объектами.

person nlawson    schedule 26.06.2015
comment
Если я уже делаю вызов get() выше, должен ли я просто включить_attachments:true и принять штраф base64, а не делать дополнительный вызов? - person pushkin; 26.06.2015
comment
В следующем выпуске PouchDB (вероятно, 3.7.0) вы сможете сделать get() с {include_docs: true, binary: true} и вернуть большой двоичный объект. На данный момент, вероятно, более эффективно выполнять дополнительный запрос, а не использовать base64. - person nlawson; 28.06.2015

arrow_upward
1
arrow_downward

Я думаю, вы все еще можете использовать src, но вам придется добавить биты base64 с правильным битом data:image/png;base64,.

{
    xtype : 'image',
    src  : 'data:image/png;base64,' + record.data
}

Вы также можете просто создать общий компонент и вставить в него некоторый необработанный HTML (с вашим кодом изображения base64). html конфиг.

Что-то типа:

{
    xtype : 'component',
    html  : '<img alt="Embedded Image" src="data:image/png;base64,' + record.data + '" />'
}
person arthurakay    schedule 26.06.2015