0

For my Sencha project, I want to download few images from server and save in the project for later use. I plan to use the local store.

I understand we need to send image data file in json format. Later i will need to save this data blog in local store and while displaying convert it into png and display. But is this possible in Sencha. I have not done json parsing in sencha. Am new to this Pls guide

  1. how i will parse json for image data
  2. how to convert data file to image format.
  3. is there any better to achieve this. Pls comment.
Daisy
  • 71
  • 1
  • 5

1 Answers1

0

1. One option is to server-side convert the image to a dataurl. It basically means you have to convert the image to Base64 and add the mimetype for the browser to interpret the data.

It will give a string like the one below, which is easy to manually cache in localstorage: 

data:image/png;base64,/9j/4AAQSkZJRgABA[...]

2. You don't need to convert the data to an image. The browser does that for you. You can just use this string as a source for the image.

<img src="data:image/png;base64,/9j/4AAQSkZJRgABA[...]" />

or in Sencha Touch using Img.setSrc()

3. Transfering images using JSON isn't recommended, because due to the base64 inefficiency the filesize is increased by about 37%. If the images are static assets, you can add them to the application by adding the containing folderpath to your Sencha Touch applications app.json file (see the resources and appcache property). This means they will get copied along when building the application.

more info: http://www.sencha.com/blog/offline-techniques-sencha-touch/

Community
  • 1
  • 1
Tomas Klingen
  • 141
  • 1
  • 5