Jump to content

Problem with getImageData() - JavaScript


Recommended Posts

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






Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...