Images from Data-URI

Monkey Forums/Monkey Code/Images from Data-URI

Indiepath

(Posted 2011) [#1]

I've made some little modifications to the mojo.graphics gxtkSurface class, specifically the load method to enable loading of an image from a Data-URI (basically a string representation of an image)

This is particularly useful in Flash and HTML5 when you may want to cache images client side or want to embed them within the application.

You can convert images to Data-URI's here : http://datauri.com/

Here's the changes (Flash and HTML only) - I don't particularly like the fact that I had to mess with core code. Extending classes with prototype is pretty simple with Javascript, shame AS3 doesn't see it that way :(

mojo.flash.as

internal function Load( path:String ):void{
	
		/* Is the path a Data URI */
		if( path.indexOf( "data:image/" )==0 ){
			import mx.utils.Base64Decoder;
			
			loader=new Loader();
			loader.contentLoaderInfo.addEventListener( Event.INIT,OnLoaded );
			loader.contentLoaderInfo.addEventListener( IOErrorEvent.IO_ERROR,OnError );
			app.IncLoading();
		
			var splitted:Array 		= path.split(",");
			var dec:Base64Decoder 	= new Base64Decoder();
	   		dec.decode(splitted[1]);
	   		
	   		this.rect=new Rectangle( 0,0,1,1 );
			loader.loadBytes(dec.toByteArray());
				
		} else {

			var ty:String=app.GetMetaData( path,"type" );
			if( ty.indexOf( "image/" )!=0 ) return;
			
			loader=new Loader();
			loader.contentLoaderInfo.addEventListener( Event.INIT,OnLoaded );
			loader.contentLoaderInfo.addEventListener( IOErrorEvent.IO_ERROR,OnError );
			app.IncLoading();
			
			var w:int=parseInt( app.GetMetaData( path,"width" ) );
			var h:int=parseInt( app.GetMetaData( path,"height" ) );
			
			this.rect=new Rectangle( 0,0,w,h );
			loader.load( new URLRequest( "data/"+path ) );
		}
	}

mojo.html5.js

gxtkSurface.prototype.Load=function( path ){
	
	/* Is the path a Data URI */
	if( path.indexOf( "data:image/" )==0 ){

		this.image		= new Image();
		var surface		= this;
		this.image.src	= path;
		this.swidth 	= this.image.width;
		this.sheight 	= this.image.height;
		this.loaded		= 1;
			
	} else {

		var ty=this.graphics.app.GetMetaData( path,"type" );
		if( ty.indexOf( "image/" )!=0 ) return;
	
		this.swidth=parseInt( this.graphics.app.GetMetaData( path,"width" ) );
		this.sheight=parseInt( this.graphics.app.GetMetaData( path,"height" ) );
	
		this.image=new Image();
		
		var surface=this;
		this.image.onload=function(){
			//executes in scope of HTML Image
			surface.loaded=1;
			surface.graphics.app.DecLoading();
		};
	
		this.graphics.app.IncLoading();
	
		this.image.src="data/"+path;
	}
}

There is one small caveat with Flash - the image size is essentially ignored so you need to set your own handles...

nodeImage = LoadImage ("data:image/png;base64,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", 1, Image.MidHandle)
nodeImage.SetHandle(16,16)

wmaass

(Posted 2011) [#2]

Indie,

Trying this out.

I see a loaded function in mojo.html5.js but no load method.

gxtkSurface.prototype.Loaded=function(){
	return this.image.complete;
}

EDIT: I am using v38 - I see that back in v31 there is a load method.

Indiepath

(Posted 2011) [#3]

Hmmn, I've not used Monkey for a while - it's possible Mark made lots of changes... I'll have a look when I have time..