javascript - Function not running in Chrome, but perfectelly well in IE and Firefox -

I have a function that is going to a web page and changing images to grayscale, it's completely over IE and Firefox Works from However, it does not run in Chrome: the images remain in color; They are not converted to grayscale.

Does anyone have any idea why this happens?

  & lt; Html & gt; & Lt; Top & gt; & Lt; Script & gt; Function transf_images () {var theImages = document.getElementsByTagName ("img"); (Var i = 0; i & lt; the images.length; i ++) for {var newImage = new Image (); / * * Store the current index as a new image ID * because the download function is async * / newImage.id = i; NewImage.onload = function () {// Recover the correct index var i = this.id; // Get width and height height = images [I] Wide; Var theheight = Images [i]. height; // Create a floating canvas to put the original image var tempCanvas = document.createElement ("canvas"); Var tempCtx = tempCanvas.getContext ("2D"); // canvas tempCanvas.width = the width and height of theWidth set; TempCanvas.height = theHight; // Original draw in a temporary canvas tempCtx.drawImage (this, 0, 0, theWidth, theHeight); // Drag the entire image into an array of pixel data var imageData = tempCtx.getImageData (0, 0, theWidth, theHeight); // pixel color var changes = new array (3); (Var y = 0; y & lt; theHyight; y ++) {for (var x = 0; x & lt; theWidth; x ++) {offset = ((y * (theWidth * 4)) + (X * 4)); Aux [0] = image data [offset + 0]; Aux [1] = imageData.data [offset + 1]; Aux [2] = imageData.data [offset + 2]; Var gray = (aux [0] + aux [1] + aux [2]) / 3; ImageData.data [offset + 0] = Math (Gray); ImageData.data [offset + 1] = math. (Gray); ImageData.data [offset + 2] = Math Plain (gray); ImageData.data [offset + 3] = imageData.data [offset + 3]; } // for} // // Finalized change of pixel color // // canvas tempCtx.putImageData (image data, 0,0) data changed back to; // Set the original image IJages [i] .src = tempCanvas.toDataURL (); } // newImage.onload newImage.src = theImages [i] .src; } // for loop - array for the image} // function & lt; / Script & gt; & Lt; / Head & gt; & Lt; Body onLoad = "transf_images ();" & Gt; & Lt; P & gt; The first image & lt; / P & gt; & Lt; Img src = "imagens_250x180 / rosa.jpg" name = "image0" width = 250 height = 180> & Lt; Br / & gt; & Lt; P & gt; Second image & lt; / P & gt; & Lt; Img src = "imagens_250x180 / ricardina.jpg" name = "image 1" width = 250 height = 180> & Lt; P & gt; Third image & lt; / P & gt; & Lt; Img src = "imagens_250x180 / manaus.jpg" name = "image1" width = 250 height = 180> & Lt; / Body & gt; & Lt; / Html & gt;  

Maybe you can use CSS filters?

  img {-webkit-filter: grayscale (1); / * WebKit * / Filter: Gray; / * IE6-9 * / filter: grayscale (1); / * W3C * /}  

See also