使用jquery檢查.png圖像中的透明度，但不使用畫布

我正在處理一個應用程序，其中放置了div背景，並用.PNG圖像掩蓋了它。在.PNG圖像中有一個透明區域，用戶可以從中看到div的背景圖像。我想知道用戶是否點擊.PNG圖像的透明區域或白色區域。使用jquery檢查.png圖像中的透明度，但不使用畫布

我發現這個例子： fiddle example using canvas

但我想這樣做，而無需使用畫布。可能嗎？

我只是在我的div上添加了名爲drop的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

其實我想在鼠標移動事件上使用它，你建議的解決方案將通過大量的Ajax調用來完成這項工作，但我想避免這種情況。 – zzai

也許使用圖像？ http://en.wikipedia.org/wiki/Image_map – Bazzz

我能想到的（沒有服務器端的援助）唯一真正的選擇是寫一些代碼，檢查PNG圖像，使地圖的透明度，對每個像素然後將其轉換爲一個長字符串，其中包含您可以通過javascript讀取的alpha通道。

雖然問題在於它會有很多數據。如果你只是將它存儲爲HEX，那麼它的長度應該是2xHxW。儘管可以通過gzipping數據並在javascript中解壓縮來改善這一點。

來源

2012-11-29 14:50:23 PhonicUK

使用jquery檢查.png圖像中的透明度，但不使用畫布

回答

相關問題