Problem with getImageData() - JavaScript

[GamerXy1]

Hi, i tried to figure out how the getImageData()-Function works.

After several tutorials i wrote a script to enlarge the pictures pixels in a canvas.

here's my code:

var canvas = document.getElementById('canvas');  var cwidth = $("canvas").innerWidth();var cheight = $("canvas").innerHeight();if (canvas.getContext){    var ctx = canvas.getContext('2d');}var lvlImg = new Image();var lvlReady = false;lvlImg.onload = function(){	lvlReady = true;	ctx.drawImage(lvlImg, lvl.x, lvl.y);}lvlImg.src = 'testbild.png';var lvl = {	h: 16,	w: 16,	x: 0,	y: 0};var pdata = new Array();	for(i=1;i<=lvl.h * lvl.w;i++){		pdata[i] = new Array();		pdata[i][0] = 0;		pdata[i][1] = 0;		pdata[i][2] = 0;		pdata[i][3] = 0;	}$(document).ready(function(){	var bd = ctx.getImageData(0, 0, 16, 16);		for(i=0;i<lvl.h;i++){		for(l=0;l<lvl.w;l++){						var punktwert = (i*lvl.w) + l;			var bdwert = punktwert * 4;			pdata[punktwert][0] = bd.data[bdwert]; //R-Wert			pdata[punktwert][1] = bd.data[bdwert + 1]; //G-Wert			pdata[punktwert][2] = bd.data[bdwert + 2]; //B-Wert			pdata[punktwert][3] = bd.data[bdwert + 3]; //A-Wert		}	}	// For each pixel draw a rectangular shape filled with its color	for(i=0;i<= lvl.h * lvl.w;i++){		var offsx = 20;		var offsy = 20;		var groessenfaktor = 3;		ctx.beginPath();		var fss = "rgba(" + pdata[i][0] + "," + pdata[i][1] + "," + pdata[i][2] + "," + pdata[i][3] + ")";		ctx.fillStyle = fss;		var actx = offsx + ((i%16) * groessenfaktor);		var acty = offsy + (((i/16) - (i%16)) * groessenfaktor);		ctx.moveTo(actx, acty);		ctx.lineTo(actx + groessenfaktor, acty);		ctx.lineTo(actx + groessenfaktor, acty + groessenfaktor);		ctx.lineTo(actx, acty + groessenfaktor);		ctx.lineTo(actx, acty);		ctx.fill();	}});

I tried to save the image-pixel-data in the variable "bd", but debugging with Firebug only returns:

TypeError: can't convert undefined to object

pdata[punktwert][0] = bd.data[bdwert]; //R-Wert

 

So bd.data is no array or it contains no data...

Whats my fault in this case?

 

Already now, thank you for your answers

 

Greetings

 

GamerXy1

 

[Chris]

It would be helpful if you could set your example up on http://jsfiddle.com

[GamerXy1]

You meant jsfiddle.net?

http://jsfiddle.net/MneR3/

[Chris]

Yeah, sorry.

 

Here you go: http://jsfiddle.net/MneR3/1/

[GamerXy1]

Yeah, cool, didn't thought about that,

but is it really necessary, that i select the picture as a DOM element?

Can't I load them dynamically (would guarantee a smoother gaming experience)

[Chris]

Sure you can.

The problem was that in the jsfiddle example it was not possible to access the pixeldata since the image was hosted on a different domain.

Including it as an img tag with base64 data solved this problem and was cleaner than puting the data block into the JS code.