Wikitude

Insert base64 encoded image into AR.ImageResource

Im looking to insert a base64 encoded image when creating a new AR.ImageResource in Wikitude SDK iOS.
I can do this directly in HTML img src attribute using javascript as follows

document.getElementById("imageFooterId").src = "data:image/png;base64," + jsonObject.picData;

But to render images in the aug view of Wikitude it is required to use the AR.ImageResource and it is a little more difficult to insert a base64 encode image.  

I am using the following function call with no luck

tmpImage = new AR.ImageResource("data:image/png;base64," + jsonObject.picData, {onError: errorLoadingImage});

Are they any suggestions out there for performing this action?

Unfortunately this is currently not supported. A network/bundle url is required for loading images. Next version of ARchitect will include a possibility to workaround this limitation. Stay tuned.

Hi,

as of today we released the ARchitect 1.1 which supports HTML Drawables. This would allow you to use the base64 encoded image data directly. e.g.

var html="";
var htmlDrawable = new AR.HtmlDrawable({html: html}, 1);
For details look at our HTMLDrawable tutorial snippet that gives more details on how to use the HtmlDrawables.

I would like to use a AR.HtmlDrawable to render an image write from Phonegap with Filewriter.

In my mind i should call the readAsDataURL function.

Is it possible? Have you got an example of a similar usage?

Thanks

The HTML Drawable allows rendering any html content supported by the mobile webview, including base64 encoded image. Other than the quick sample code above we don't have an example available. As for phonegaps API to generate the base64 encoded image data please refere to their documentation.