功能不在Chrome中運行，但在IE和Firefox中非常好

我有一個功能，它的任務是進入網頁並將圖像轉換爲灰度。它完全在IE和Firefox上運行。但是，它不在Chrome中運行：圖像保持顏色;它們不會變成灰度。功能不在Chrome中運行，但在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>

來源

2014-02-18 user3059287

是否有任何控制檯錯誤輸出？ –

也許你可以使用css過濾器？

img { 
    -webkit-filter: grayscale(1); /* Webkit */ 
    filter: gray; /* IE6-9 */ 
    filter: grayscale(1); /* W3C */ 
}

也看到這個demo

來源

2014-02-18 17:22:48

我不行。我真正想要做的是適應色盲人的圖像。在上述示例中，爲了簡化，我改變了每個像素更改的方式。謝謝 – user3059287

@ user3059287如果您有任何問題或需要建議，請提供演示））我可以幫助） –

如果您考慮它，我可以通過電子郵件向您發送HTML文件和ziped文件中的3個圖像方便。不管怎麼說，代碼都在這裏。只有3張圖片沒有。 – user3059287

我是問

我試過其他sugestions的作者，但沒有得到解決。

然後，我把代碼在線（在服務器），它的工作。現在，它在Chrome中都可以正常工作。

感謝您的請求

來源

2014-02-20 12:28:37 user3059287

功能不在Chrome中運行，但在IE和Firefox中非常好

回答

相關問題