크롬에서는 작동하지 않지만 IE와 Firefox에서는 완벽하게 잘 작동합니다.

웹 페이지로 이동하여 이미지를 회색조로 변환하는 기능이 있습니다. IE와 Firefox에서 완벽하게 작동합니다. 그러나 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 */ 
}

또한 I 질문 I 다른 sugestions 시도

의 저자이 demo

출처

2014-02-18 17:22:48

할 수 없습니다. 내가 진정으로 원하는 것은 색맹 사람들을 위해 이미지를 적용하는 것입니다. 위의 샘플에서 간단히하기 위해 각 픽셀을 변경하는 방법을 변경했습니다. 감사합니다 – user3059287

@ user3059287 질문이 있거나 도움이 필요하면 데모를 제공하십시오.)) 제가 도와 드릴 수 있습니다. –

HTML 파일과 3 개의 이미지를 우편으로 보내려면 이메일로 보내주십시오. 편리한. 어쨌든, 코드는 모두 여기에 있습니다. 3 개의 이미지 만이 아닙니다. – user3059287

로 볼 수 있지만, 어느 것도 해결하지 않는다.

그런 다음 코드를 온라인으로 서버에 넣었습니다. 이제 Chrome에서 완벽하게 작동합니다.

감사합니다.

출처

2014-02-20 12:28:37 user3059287

크롬에서는 작동하지 않지만 IE와 Firefox에서는 완벽하게 잘 작동합니다.

답변

관련 문제