Javascript 功能不在Chrome中运行，但在IE和Firefox中运行良好_Javascript_Google Chrome_Web

Javascript 功能不在Chrome中运行，但在IE和Firefox中运行良好

javascript google-chrome web

Javascript 功能不在Chrome中运行，但在IE和Firefox中运行良好,javascript,google-chrome,web,Javascript,Google Chrome,Web,我有一个功能，它的任务是进入网页并将图像转换为灰度。它可以在IE和Firefox上完美地工作。然而，它不运行在铬：图像保持彩色；它们不会转换为灰度有人知道为什么会这样吗 <html> <head> <script> function transf_images(){ var theImages = document.getElementsByTagName("img"); for (var i=0; i <theImages.leng

我有一个功能，它的任务是进入网页并将图像转换为灰度。它可以在IE和Firefox上完美地工作。然而，它不运行在铬：图像保持彩色；它们不会转换为灰度

有人知道为什么会这样吗

<html>
<head>

<script>

function transf_images(){
  var theImages = document.getElementsByTagName("img");

  for (var i=0; i <theImages.length; i++){
    var newImage=new Image();

    /*
    * Store the current index as the new image's id
    * since the onload function is async
    */
    newImage.id = i;        
    newImage.onload=function(){

      // Retrieve the correct index
      var i = this.id;

      // Get width and height
      var theWidth = theImages[i].width;
      var theHeight = theImages[i].height;

      // create a temporary canvas to put the original image
      var tempCanvas=document.createElement("canvas");
      var tempCtx=tempCanvas.getContext("2d");

      // Set width and height of the canvas
      tempCanvas.width = theWidth;
      tempCanvas.height = theHeight;

      // Draw the original in a temporary canvas
      tempCtx.drawImage(this, 0, 0, theWidth, theHeight);

      // pull the entire image into an array of pixel data
      var imageData = tempCtx.getImageData(0, 0, theWidth, theHeight);


      // CHANGE OF THE PIXEL COLOR

     var aux = new Array(3);

         for (var y = 0; y < theHeight; y ++) {
           for (var x = 0; x < theWidth; x ++) {
                 offset = ((y*(theWidth*4)) + (x*4));

                 aux[0] = imageData.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.round(gray);
                imageData.data[offset + 1] = Math.round(gray);
                imageData.data[offset + 2] = Math.round(gray);
                imageData.data[offset + 3] = imageData.data[offset + 3]; 
           } //for
         } //for
         // final of the CHANGE OF THE PIXEL COLOR

      // put the altered data back on the canvas  
      tempCtx.putImageData(imageData,0,0);

      // Set the original image
      theImages[i].src = tempCanvas.toDataURL();

    }    // newImage.onload
    newImage.src = theImages[i].src;    

  }  //for  loop - for the image array
}  //function
</script>

</head>

<body onLoad="transf_images();">
    <p>First Image</p>
    <img src="imagens_250x180/rosa.jpg" name="image0" width=250 height=180 ><br/>
    <p>Second Image</p>
    <img src="imagens_250x180/ricardina.jpg" name="image1" width=250 height=180 >
     <p>Third Image</p>
    <img src="imagens_250x180/manaus.jpg" name="image1" width=250 height=180 >
</body>
</html>


函数transf_images（）{
var theImages=document.getElementsByTagName（“img”）；
对于（var i=0；i也许您可以使用css过滤器
img {  
    -webkit-filter: grayscale(1); /* Webkit */  
    filter: gray; /* IE6-9 */  
    filter: grayscale(1); /* W3C */  
}  

也要注意这一点
我是这个问题的作者
我试过其他的建议，但都没有解决
然后，我把代码放在了网上（在一个服务器上），它工作了。
现在，它的工作完美，无论是在铬
感谢您的建议
是否有控制台错误输出？我不能。我真正想做的是为色盲患者调整图像。在上面的示例中，为了简化，我更改了更改每个像素的方式。Thanks@user3059287如果您有任何问题或需要建议，请提供演示）“我可以帮忙”，如果你认为方便的话，我可以通过电子邮件发送HTML文件和3个图像，如果你认为方便的话。无论如何，代码都在这里。只有3个图像不是。@ USER 305987-是发送给我-farhatmihalko@gmail.com