How do I deal with an image response from a REST API?

[Kal]

I am trying to use esponce.com REST API to create QR codes. The request is in JSON format, but the response returned can be set to: png (default), jpg, bmp, tif, xaml, svg, eps, txt, html, zip.

Question is, how do I deal with this? Let's say I use the default png; I just get a raw image response back. If I connect that to an "image" widget, nothing shows up.

The API call is something like: "https://esponce.com/api/v3/generate?c..."

BTW, I did look at the answer to: https://getsatisfaction.com/apperyio/... , but this does not work for me, since I need to get the image response back and store it in the database, and later display the QR code even if the device is not online. So, just putting it as an embedded URL is not an option.

Thanks,
-Kal.

[Kal]

OOPS.... this workaround really does not work. Even when I save it as a second step, it just saves the URL, not the actual image itself, so I am back to square 1.

(OK, I think I have found a work-around. This is to use the answer from the other question that I cited above to set an image control with the GET response directly (via the javascript), then as a second step, save the image to the DB. This works OK, but would like to know if there is a better way.)

[Alena Prykhodko]

We need additional time to check this. We'll keep updating.

[Yurii Orishchuk]

Hi Kal.

It's very hard to answer your question cause of you don't provide information about all requirements.

So please specify:

1 What do you mean by DB ? This is local DB(in device) or remote appery.io DB?

2 Describe all use case with this image (include offline mode).

Basically:

In case if you don't need offline mode you need to store URL to appery.io DB and then pass this url to the component.

In case if you need to be independent from "esponce.com" service you can store this image (raw) in appery.io DB. And then get this source and pass it to the image component.

In case if you need to use this image only on current device you can to get raw for this image and store it in LSV(local storage variable). And get when you need it.

Regards.

[Kal]

For the 3 cases you mention, I need to code for both #2 and #3.

#3: This is the main use case. I need to store the image in the phone's own DB cache and use it when needed.

#2: This MAY be needed if the phone's DB is not reliable for some reason. I may or may not need that depending on what experience shows.

So, for the main use case, namely LSV storage, how would I go about doing it?

[Yurii Orishchuk]

Hi Kal.

Here is a brief plan to store raw in the LSV:

1 Get Raw image source string.

2 Save it into the LSV.

3 Restore from LSV(when needed) and put it into the image component.

I guess you need help with 1step of this plan.

So to get raw source string you can use following code:

precode

//Get img component. You should replace "mobileimage_1" with your img component name.
var img = Apperyio("mobileimage_1");

var width = img.width();
var height = img.height();

var canvas = jQuery('<canvas width="' + width + '" height="' + height + '"></canvas>');

var c = canvas[0];
var ctx = c&#46;getContext("2d");

ctx&#46;drawImage(img[0], 0, 0, width, height);

&#47;&#47;Get base64String&#46;
var base64String = c&#46;toDataURL();

localStorage&#46;setItem("storedImgSource", base64String);

&#47;&#47;Using base64String&#46;
console&#46;log(base64String);

/code/pre

Regards.