자바 스크립트를 사용하여 마우스 오버시 이미지의 회색조 버전 표시

Question

mouseover에 이미지의 회색조 버전을 표시하는 방법이 필요합니다. 이 기능은 브라우저의 캔버스 기능을 사용하여 구현되었지만 모든 브라우저에서 캔버스가 구현되기 전에는 그 방법을 사용하지 않으려 고합니다.

그런 일을 한 사람이 있습니까? 인터넷에서 찾을 수

Answer 1

Canvas를 사용하지 않고 브라우저 별 기능을 사용하지 않으려면 서버에서 그레이 스케일 이미지를 생성해야합니다. 사전 또는 필요시. 수행 방법 예 : answered elsewhere on SO

Answer 2

:

function grayscale(image, bPlaceImage) 
{ 
    var myCanvas=document.createElement("canvas"); 
    var myCanvasContext=myCanvas.getContext("2d"); 

    var imgWidth=image.width; 
    var imgHeight=image.height; 
    // You'll get some string error if you fail to specify the dimensions 
    myCanvas.width= imgWidth; 
    myCanvas.height=imgHeight; 
    // alert(imgWidth); 
    myCanvasContext.drawImage(image,0,0); 

    // This function cannot be called if the image is not rom the same domain. 
    // You'll get security error if you do. 
    var imageData=myCanvasContext.getImageData(0,0, imgWidth, imgHeight); 

    // This loop gets every pixels on the image and 
    for (j=0; j<imageData.height; i++) 
    { 
     for (i=0; i<imageData.width; j++) 
     { 
     var index=(i*4)*imageData.width+(j*4); 
     var red=imageData.data[index]; 
     var green=imageData.data[index+1]; 
     var blue=imageData.data[index+2];  
     var alpha=imageData.data[index+3]; 
     var average=(red+green+blue)/3;  
     imageData.data[index]=average;  
     imageData.data[index+1]=average; 
     imageData.data[index+2]=average; 
     imageData.data[index+3]=alpha;  
     } 
    } 

    if (bPlaceImage) 
    { 
     var myDiv=document.createElement("div"); 
     myDiv.appendChild(myCanvas); 
     image.parentNode.appendChild(myCanvas); 
    } 
    return myCanvas.toDataURL(); 
    } 

사용법 :

HTML 5는 이 스크립트를 그리고 이미지

를 조작하는 데 사용할 수있는 캔버스 객체를 소개합니다 :

<img id="myImage" src="image.gif" 
    onload="javascript:grayscale(this, true);"></img> 

테스트하여 통과 :

• 파이어 폭스 3.5.4
• 크롬 3.0
• 사파리 4.0

테스트 사용 실패 :

• 인터넷 익스플로러 6
• 인터넷 Explo RER 7

자료 : reko_t이 주석 것처럼, 당신은 단지 몇 가지 이유로 서버에있는 이미지의 그레이 스케일 버전을 만들 수 없습니다, 가정 http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html

Answer 3

, 그것은 IE에서 가능은 독점 filter을 사용하여 CSS 속성, BasicImage with grayScale. , 당신은 apply an SVG mask 수 파이어 폭스에서

a { 
    display: block; 
    width: 80px; 
    height: 15px; 
    background-image: url(http://www.boogdesign.com/images/buttons/microformat_hcard.png); 
} 
a:hover { 
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1); 
} 

을하거나 캔버스 요소를 사용하여 시도 할 수 있습니다 : 당신은이 CSS 선언 할 수있다, 이렇게 JS 필요하지 않습니다.

그러나 가장 간단한 해결책은 이미지의 회색조 버전을 수동으로 만들거나 GD과 같은 것으로 서버 쪽에서 만들 수 있습니다.