Search the Community

I use putImageData and getImageData functions in my project. But I think I came across a limit when using them. I searched but could not find any information about it. There seems to be a limit of 65536 on Chrome and 32768 on Firefox. Does anyone have any information about this? The variable "pixelLength" in the example does not give an output when set to 65536. var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var pixelLength = 65535; var wf = document.createElement("canvas"); wf.width = pixelLength; wf.height = 16; var ctx_wf = wf.getContext("2d"); function CreateImageData() { var data = ctx_wf.createImageData(pixelLength, 1); for (var i = 0; i < data.data.length; i += 4) { data.data[i + 0] = 255; data.data[i + 1] = 0; data.data[i + 2] = 0; data.data[i + 3] = 255; } return data; } var imgData = CreateImageData(); ctx_wf.putImageData(imgData, 0, 0); var width = c.width; var height = c.height; ctx.drawImage(ctx_wf.canvas, 0, 0, pixelLength, wf.height, 0, 0, width, height);

Hi people, I'm porting something from flash where I have a drawn map with roads, and I want to be able to select each road individually with the mouse. now in Flash I could simply use the hittest on the shapes of the roads, but in PIXI I can't. My solution was to draw all the roads, each with an unique RGB color, and do a get pixel on your mousecoords to see which road you've selected. Now my problem is, how do i get pixeldata from my sprite when I'm using a webgl renderer ? What I've come up with so far is creating a separate canvasrenderer and a separate stage to render my map to, and from that canvas (renderer.view) get the 2d context and get pixeldata.. // create separate canvas and canvasRenderer for this pixel mapvar canvasStage = new PIXI.Stage(0x000000);var canvasRenderer = new PIXI.CanvasRenderer(1024, 598, null, true);// create a texture that holds the mapvar texture = new PIXI.RenderTexture(1024, 598, this.canvasRenderer);texture.render(map);// create a sprite on our separate stage, otherwise the texture won't be renderedvar textureSprite = new PIXI.Sprite(texture);canvasStage.addChild(textureSprite);// render the stagecanvasRenderer.render(canvasStage);after that is done, I can use this to get my pixels var pixelData = canvasRenderer.view.getContext(("2d")).getImageData(posX, posY, 1, 1).data;Is this the correct way to do it? or is there a better way? regards, Martijn

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