From:  "Edwin K" <edwin.khodabakchian@gmail.com>
Date:  10 Feb 2007 07:40:30 Hong Kong Time
Newsgroup:  news.mozilla.org/netscape.public.mozilla.layout
Subject:  

Determine Image size from a XPComponent written in Javascript

NNTP-Posting-Host:  71.198.188.180

Hi,

I am from within a Javascript XPComponent determine the size of a set
of images. I have just started to learn about the internals of Mozilla/
Firefox and based on the information collected on the web, here is
what my code looks like:

var ImageUtils = function()
{
	function newURI( url )
	{
		var ioService = Components.classes["@mozilla.org/network/io-service;
1"]
								  .getService()
								  .QueryInterface( Components.interfaces.nsIIOService );
		return ioService.newURI(url, null, null);
	}

	var imgLoader = Components.classes["@mozilla.org/image/loader;1"]
							  .getService()
							  .QueryInterface( Components.interfaces.imgILoader );

	var workingSet = {};

	var that = {};

	that.askImageSize = function( url, callbackFunc )
	{
		// somebody has already requested this image
		if( workingSet[ url ] != null )
		{
			workingSet[ url ].push( callbackFunc );
			return;
		}

		var uri = newURI( url );
		$debug( "Asked size information for: " + uri.spec );

		workingSet[ uri.spec ] = [ callbackFunc ];

		imgLoader.loadImage( uri, uri, uri, null, that, null, null, null,
null );
	}

	// imgIDecoderObserver
	that.onDataAvailable = function(){ $debug( "onDataAvailable" ) };
	that.onStartDecode   = function(){ $debug( "onStartDecode" ) };
	that.onStartFrame    = function(){ $debug( "onStartFrame" ) };
	that.onStopContainer = function(){ $debug( "onStopContainer" ) };
	that.onStopFrame     = function(){ $debug( "onStopFrame" ) };

	that.onStopDecode     = function ( request, status, statusArg )
	{
		$debug( "onStopDecode:" + status + ".." + statusArg );
	};

	that.onStartContainer = function (request, container )
	{
		$debug( "onStartContainer" );

		// extract size information
		var url    = request.URI.spec; 		// we encoded the image url in the
title
		var width  = container.width;
		var height = container.height;

		$debug( "Ruler: " + url + " = " + width + " x " + height );

		var requestors = workingSet[ url ];

		if( requestors == null )
			$debug( "BUG: There is now requestors for: " + url );
		else
			for( var i = 0; i < requestors.length; i++ )
				requestors[ i ].call( this, url, width, height );
	}

	that.runUnitTests = function()
	{
		function getImageSize( aURL )
		{
			that.askImageSize(	aURL,
								function( url, width, height )
								{
									$debug( "The result is:" + url + " -- w:"+ width + " -- h: "
+ height );
								}
								);
		}

		getImageSize( "http://flickr.com/photo_zoom.gne?
id=384986014&size=o" );
		// getImageSize( "http://flickr.com/photo_zoom.gne?
id=344620838&size=o" );
		// getImageSize( "http://flickr.com/photo_zoom.gne?
id=344620839&size=o" );
		// getImageSize( "http://flickr.com/photo_zoom.gne?
id=344620840&size=o" );
		// getImageSize( "http://www.techcrunch.com/wp-content/
photobucketlogo210.gif" );
	}

       return that;
}();

This does not work consistently: I sometimes works for some images. It
sometimes crashes the browser (I think when the number of concurrent
requests is too high??).

I was wondering if someone has done this before or is familiar enough
with the internals of firefox to point me where my mistake is.

Thank you!!!!
-Edwn