캔버스를 사용하지 않고 jquery를 사용하여 .png 이미지의 투명도를 확인하십시오.

div 배경을 배치하고 .png 이미지로 마스크하는 응용 프로그램에서 작업하고 있습니다. 그 .PNG 이미지에는 사용자가 div의 배경 이미지를 볼 수있는 투명한 영역이 있습니다. 사용자가 .PNG 이미지의 투명 영역이나 흰색 영역을 클릭하는지 알고 싶습니다. fiddle example using canvas 캔버스를 사용하지 않고 jquery를 사용하여 .png 이미지의 투명도를 확인하십시오.

그러나 나는 캔버스를 사용하지 않고이 작업을 수행 할 수 :

나는이 예제를 발견했다. 가능한가?

나는 drop이라는 내 div에 단순히 png 이미지를 추가하고 있습니다. 사전 :)에서

var url = "url(./img/imagesapp/background.jpg?"+Math.random()+")"; 
$('.drop').css('background-image', url)   
var id=triangle; 
var test="<img id='img"+id+"' class='shapeOfAC' src='./img/shapes/"+id+".png'/>"; 
$(".drop").append(test);

덕분에 Image of my application 는

출처

2012-11-29 zzai

클라이언트에서 이미지의 어떤 위치를 클릭하여 AJAX 요청을하면 서버 측에서 테스트 할 수 있습니다. 하지만 캔버스없이 클라이언트 쪽에서 할 수 있다고는 생각하지 않습니다. – PhonicUK

사실 나는 마우스 이동 이벤트에서 이것을 사용하고 당신이 제안하는 해결책은 많은 아약스 호출을 만들어 작업을 수행 할 것이지만 그것을 피하고 싶다. – zzai

아마 imagemap을 사용하고 계십니까? http://en.wikipedia.org/wiki/Image_map – Bazzz

내가 (서버 측의 도움없이) 생각할 수있는 유일한 대안은 각 픽셀에 대한 투명성의지도를 만들기 위해 PNG 이미지를 검사하는 코드를 작성하는 것입니다 그것을 자바 스크립트를 통해 읽을 수있는 알파 채널이 들어있는 긴 문자열로 바꾸십시오.

비록 이것이 많은 데이터 일 것이지만 문제가 있습니다. 당신이 16 진수의 덩어리를 저장했다면 길이는 2xHxW 바이트가 될 것입니다. 데이터를 gzipping하고 javascript로 압축을 풀면이를 향상시킬 수 있습니다.

출처

2012-11-29 14:50:23 PhonicUK

캔버스를 사용하지 않고 jquery를 사용하여 .png 이미지의 투명도를 확인하십시오.

답변

관련 문제