getimagedata

I'm very new to Html5 and I was wondering if someone could shed some light on this: <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById('canvas'); //682 x 111 pixel canvas var context = canvas.getContext('2d'); var image = new Image(); image.src = "/Content/ImageTestOne/logo-for-dissolve.png"; //682 x 111 pixel image image.onload = function () { context.drawImage(image, 0, 0); drawFrame(); }; function drawFrame() { window.requestAnimationFrame(drawFrame, canvas); imageData = context.getImageData(0, 0, canvas.width, canvas.height); //Do something

I'm trying to develop an application that will use getImageData in javascript in Firefox 3, but I am getting a " NS_ERROR_DOM_SECURITY_ERR " on the getImageData call. The javascript and the image are both currently being served from by hard drive, which is apparently a security violation? When this is live they will both be served from the same domain, so it won't be a problem, but how can I develop in the meantime? You could try installing a local webserver such as Apache (on unix) or IIS (on Windows). That will ultimately give you the best local test bench for web-related stuff, because as

Is it somehow possible to convert an byte array to image data without using canvas? I use currently something like this, however I think that can be done without canvas, or am I wrong? var canvas = document.getElementsByTagName("canvas")[0]; var ctx = canvas.getContext("2d"); var byteArray = [ 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, // red 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, // green 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255 // blue ]; var imageData = ctx.getImageData(0, 0, 10, 3); for(var i = 0; i < byteArray.length; i+=4){ imageData.data[i] = byteArray[i]; imageData

I have checked this question which provides the perfect answer. But my problem is slightly different. I have a canvas of 300 x 300 and i am re-sizing the canvas using css to 200 x 60 . If i re-size the canvas using css i am not able to get the color value onmouseover . In the re-sized fiddle if you mouse over right below the red or blue rectangles you will notice it still says #FF0000 & #0000FF respectively while it should be #000000 . So how to make it work even with re-sized canvas? Fiddle : Re-sized with css. Fiddle : Non re-sized. You need to apply a scale factor inside the mouse handler

Providing you have an array of colors and you want to fill a canvas with its content, the fastest way I'm aware of is: var my_array = /* already have it */; var img_data = ctx.createImageData(canvas.width, canvas.height); for (var i=0; i<canvas.width*canvas.height; ++i) img_data[i] = my_array[i]; ctx.putImageData(img_data,0,0); This seems too slow as I'm copying the entire array twice! One to make the img_data and another to put it on the canvas. Isn't there a way to simply plug the original my_array into the element? You should directly make use of a typed array instead of a javascript array

After setting a certain colour as the fillStyle of the canvas and drawing a rectangle with fillRect , the colour of the rectangle sometimes differs a bit from the one provided (the getImageData returns different values - usually one of them is lower by 1). It seems to happen only when using rgba colours (and not with rgb ) but I actually do need to use the alpha channel. I've made a simple test suite on js fiddle for anyone who would like to look into this issue: http://jsfiddle.net/LaPdP/1/ Any ideas on why is this happening and if there is any way to fix that? If it at least happened always