JavaScript를 사용하여 마우스 오버에 Grey-Scale 버전의 이미지를 표시합니다.

Question

Grayscale 버전의 이미지를 표시하는 방법이 필요합니다. mouseover. 브라우저의 Canvas 기능을 사용하여 구현되는 것을 보았지만 모든 브라우저에서 캔버스가 구현되기 전에 해당 메소드를 사용하고 싶지 않습니다.

그런 일을 한 사람이 있습니까?

Answer 1

캔버스를 사용하지 않고 브라우저 특정 기능을 사용하고 싶지 않다면 서버에서 그레이 스케일 이미지를 생성해야합니다. 사전 또는 주문형. 그 일을하는 방법 다른 곳에서 대답했습니다

Answer 2

REKO_T가 언급 한 바와 같이, 어떤 이유로 든 서버에서 이미지의 회색 스케일 버전 만 만들 수는 없다고 가정하면 독점을 사용하여 가능합니다. filter CSS 속성, 그레이 스케일을 사용한 Basicimage. 이를 위해 JS가 필요하지 않으며 CSS에서 선언 할 수 있습니다.

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);
}

Firefox에서는 할 수 있습니다 SVG 마스크를 적용하십시오, 또는 캔버스 요소를 사용해 볼 수 있습니다.

그러나 가장 간단한 솔루션은 이미지의 회색 스케일 버전을 수동으로 만들거나 다음과 같은 서버 측면을 수행하는 것일 수 있습니다. GD.

Answer 3

그물에서 발견 :

HTML 5는 이미지를 그리고 조작하는 데 사용할 수있는 캔버스 개체를 소개합니다.

대본 :

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();
  }

사용법 :

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

다음을 사용하여 통과 된 테스트

• Firefox 3.5.4
• 크롬 3.0
• 사파리 4.0

테스트는 다음을 사용하지 못했습니다.

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

자원:http://www.permadi.com/tutorial/jscanvasgrayscale/index.html