GamerXy1 Posted May 2, 2013 Share Posted May 2, 2013 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 objectpdata[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 Quote Link to comment Share on other sites More sharing options...
Chris Posted May 2, 2013 Share Posted May 2, 2013 It would be helpful if you could set your example up on http://jsfiddle.com Quote Link to comment Share on other sites More sharing options...
GamerXy1 Posted May 2, 2013 Author Share Posted May 2, 2013 You meant jsfiddle.net?http://jsfiddle.net/MneR3/ Quote Link to comment Share on other sites More sharing options...
Chris Posted May 2, 2013 Share Posted May 2, 2013 Yeah, sorry. Here you go: http://jsfiddle.net/MneR3/1/ Quote Link to comment Share on other sites More sharing options...
GamerXy1 Posted May 2, 2013 Author Share Posted May 2, 2013 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) Quote Link to comment Share on other sites More sharing options...
Chris Posted May 2, 2013 Share Posted May 2, 2013 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.