2011-08-26 3 views
1

Firefox에서 JavaScript를 사용하여 마우스 오버시에 컬러 이미지를 회색조로 변환하려고합니다. 지금까지 나는이 있습니다Firefox에서 마우스 오버시 이미지의 회색 음영 버전을 표시하기 위해 JavaScript를 사용하는 방법은 무엇입니까?

이 오류 발생
<!DOCTYPE html> 
<html> 
    <head> 
     <title> New Document </title> 
     <script type="text/javascript"> 
      window.onload = function() { 
       var area = document.getElementById('area'); 
       alert('area:'+area); 
       var context = area.getContext('2d'); 
       alert('context:'+context); 

       if (context) { 
        var imgd = context.getImageData(0, 0, 500, 300); 
        var pix = imgd.data; 

        for (var i = 0, n = pix.length; i < n; i += 4) { 
         var grayscale = pix[i ] * .3 + pix[i+1] * .59 + pix[i+2] * .11; 
         pix[i] = grayscale; // red 
         pix[i+1] = grayscale; // green 
         pix[i+2] = grayscale; // blue 
        } 

        context.putImageData(imgd, 0, 0); 
       } 
      }; 
     </script> 
    </head> 

    <body> 
    <canvas id="area" width="500" height="300"> 
     <img id="canvasSource" src="http://www.treehugger.com/elephant-national-heritage-animal-india.jpg" alt="Canvas Source" /> 
    </canvas> 
    </body> 
</html> 

:

Line: 9 
Error: Object doesn't support this property or method 

내가 어떻게 해결합니까를? 비 IE에서

답변

0

jfunc 함수 - http://jfunc.com/jFunc-functions.aspx을 사용할 수 있습니다 - 함수 "jFunc_CanvasFilterGrayscale"을 사용하고 onmouseover 이벤트 함수를 호출하십시오.

관련 문제