브라우저에서 마우스가 가리키는 곳에서 이미지 색상을 얻을 수 있습니까?

빌드 할 웹 응용 프로그램이 있습니다. 이미지 맵이 아닌 좀 더 우아한 것을 시도하고 싶습니다.브라우저에서 마우스가 가리키는 곳에서 이미지 색상을 얻을 수 있습니까?

다른 대륙이 다른 색상으로 표시되는 세계지도가있을 것입니다.

아시아는 녹색이며 아시아는 녹색입니다.

내 마우스가 호주 모양에 마우스를 올려 놓으면 내 코드가 커서가 현재 커서를 가리키고있는 곳의 색을 확인하여 호주에 있다는 것을 알 수있는 방법이 있습니까?

나는 이미지 나 다른 것에 마우스 좌표를 확인할 수 있지만 실제로 미리 정의 된 값/모양/여백에 의존하지 않는 무언가를 얻고 싶습니다.

어떤 아이디어와 제안이라도 대단히 감사하겠습니다. 많은 감사드립니다.

2010-03-11 Michael Mao

다음은지도 강조 표시에 대한 다른 좋은 아이디어입니다 (1) David Lynch의 jQuery 플러그인 (http://davidlynch.org/blog/2008/03/maphilight-image-map-map-mouseover-highlighting/) 및 (2) Another Mapper (http://www.netzgesta.de/mapper/) – Mottie

지도의 종류에 따라 다릅니다. canvas을 지원하는 브라우저의 특정 요소는 가능하지만 전체 페이지는 가능하지 않습니다. 그래서 자바 스크립트를 사용 JQuery와 않았고,에 StackOverflow에 다른 사이트에 여기 다양한 참조를 병합 JavaScript eyedropper (tell colour of Pixel under mouse cursor)

출처

2010-03-11 13:39:46

이 빠른 답변에 많은 감사를 표합니다. –

빙고! 이미 대답 해 놨어. 일종의. –

여기

<html> 
<body> 
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 
<script src="jquery.js"></script> 
<script type="text/javascript"> 
    window.onload = function(){ 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var img = new Image(); 
     img.src = 'photo_apple.jpg'; 
     context.drawImage(img, 0, 0); 
    }; 

    function findPos(obj){ 
    var current_left = 0, current_top = 0; 
    if (obj.offsetParent){ 
     do{ 
      current_left += obj.offsetLeft; 
      current_top += obj.offsetTop; 
     }while(obj = obj.offsetParent); 
     return {x: current_left, y: current_top}; 
    } 
    return undefined; 
    } 

    function rgbToHex(r, g, b){ 
    if (r > 255 || g > 255 || b > 255) 
     throw "Invalid color component"; 
    return ((r << 16) | (g << 8) | b).toString(16); 
    } 

$('#myCanvas').click(function(e){ 
    var position = findPos(this); 
    var x = e.pageX - position.x; 
    var y = e.pageY - position.y; 
    var coordinate = "x=" + x + ", y=" + y; 
    var canvas = this.getContext('2d'); 
    var p = canvas.getImageData(x, y, 1, 1).data; 
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6); 
    alert("HEX: " + hex); 
}); 
</script> 
<img src="photo_apple.jpg"/> 
</body> 
</html>

I에만 사용 캔버스와

내 비슷한 질문에 대한 답변을 참조하십시오 하나의 이미지이지만 이미지 위에 <map>을 사용해야하는 경우에도 가능합니다. 도와줬으면합니다!

출처

2012-01-09 23:53:23 ebragaparah

브라우저에서 마우스가 가리키는 곳에서 이미지 색상을 얻을 수 있습니까?

답변

관련 문제