javascript

Create Canvas Image with jQuery

By On May 13, 2012 · Leave a Comment

I usually use <img tag to create images almost for everything. However one day I stuck with the iPad being limited to load more than 8MB of images into one page. Eventually I had to replace all of my <img tags with the <canvas element. Below is a simple example how you can create canvas image element. The only trick with canvas is that you have to fill it up with image and resize only when image is completely loaded.

 

var loadCanvas = function(src) {
	var canvas = document.createElement("canvas");
	var context = canvas.getContext("2d");
	var img = new Image();
	img.src = src;
 
	$(img).load(function(){
		canvas.width = img.width;
		canvas.height = img.height
		context.drawImage(this, 0, 0);
	});
 
	return $(canvas);
};

Dima Svirid

Software architect. Ajax/Javascript, HTML5, Android, iPhone/iPad, JAVA, PHP, Cold Fusion, SQL, Air, Flash, Open source software, Frameworks

More Posts

Follow Me:

Tagged with: • •
 

Leave a Reply