給定一個帶有一些透明像素和一些不透明像素的web上下文中的PNG,Javascript中有一種方法可以確定用戶是否點擊了非透明像素?僅webkit解決方案將是完全可以接受的。不透明像素點擊檢測
11
A
回答
24
1)創建相同大小的HTML5畫布作爲圖像
2)獲取畫布的上下文,的drawImage(yourImage,0,0)
3)d = context.getImageData(0,0,W IMG的,H IMG
4)d.data [(Y *寬度+ X)* 4 + 3]爲阿爾法
canvas = document.createElement("canvas"); //Create HTML5 canvas: supported in latest firefox/chrome/safari/konquerer. Support in IE9
canvas.width = img.width; //Set width of your rendertarget
canvas.height = img.height; // \ height \ \ \
ctx = canvas.getContext("2d"); //Get the 2d context [the thing you draw on]
ctx.drawImage(img, 0, 0); //Draw the picture on it.
id = ctx.getImageData(0,0, img.width, img.height); //Get the pixelData of image
//id.data[(y*width+x)*4+3] for the alpha value of pixel at x,y, 0->255
8
的)我知道這些東西都是出的時尚這些天,但HTML image maps仍然有效,並且可以實現將圖像中的幾乎任意形狀的擊中目標加入。如果您實際上並不想在點擊時重新載入另一個頁面,則可以使用此技術更改URL中的錨點,然後以Javascript時間間隔獲取更改。
0
畫布是爲此目的而走的路。但是請記住,較舊的Internet Explorer版本將無法使用getImageData()
功能。即使你包含excanvas。
我爲此目的製作了一個小的jquery插件,也許它可以幫助您解決問題,而不會完全重新發明輪子。 http://www.cw-internetdienste.de/pixelselection/
相關問題
- 1. 的ImageButton檢測點擊甚至在透明的像素
- 2. 檢測懸停並點擊透明格
- 3. HTML - 點擊透明PNG中的像素?
- 4. 用Imagick檢測像素透明度
- 5. 如何設置鼠標點擊以不打透明像素
- 6. JButton中不透明像素的事件檢測
- 7. 在部分透明的圖像上點擊透明區域
- 8. 透明圖像上的相交檢測
- 9. SpriteKit碰撞檢測與透明圖像
- 10. 檢測點擊的元素
- 11. 檢測點擊img元素
- 12. 檢測iframe元素點擊
- 13. 檢測BufferedImage是否包含透明像素
- 14. 檢測點擊圖像類
- 15. 不透明使相鄰元素不可點擊?
- 16. 只有當點擊的像素不透明時,纔會點擊圖像上註冊的事件?
- 17. 檢索透明圖像的最後一個非透明像素位置
- 18. 點擊透明表格
- 19. 透明按鈕點擊
- 20. Android透明區域點擊
- 21. 如何檢測Event.MOUSE_LEAVE時的wmode =不透明或的wmode =透明
- 22. 灰色透明不可點擊背屏
- 23. jquery點擊透明div不工作
- 24. WPF全透明+不可點擊
- 25. css點擊不透明轉換
- 26. Matlab:透明物體檢測
- 27. PHP imagick檢測透明度
- 28. Opencv透明物體檢測
- 29. 如何檢測頁面不透明度?
- 30. RGB像素透明度
好的。那很好!當我得到更多選票時,在34分鐘內爲您+1 !-) – Josh 2010-05-20 23:25:11