गैर पारदर्शी पिक्सेल

Question

पर एक वेब संदर्भ में एक पीएनजी को देखते हुए कुछ पारदर्शी पिक्सेल और कुछ गैर-पारदर्शी पिक्सल के साथ देखते हुए, जावास्क्रिप्ट में यह निर्धारित करने का कोई तरीका है कि उपयोगकर्ता ने एक गैर-पारदर्शी पिक्सेल पर क्लिक किया है या नहीं? एक वेबकिट-केवल समाधान पूरी तरह से स्वीकार्य होगा।

Answer 1

1) अपनी छवि
2) कैनवास के संदर्भ जाओ, drawImage (yourImage, 0, 0)
3) घ = context.getImageData (0, 0, img की डब्ल्यू, एच के रूप एक ही आकार के लिए HTML5 कैनवास बनाएं 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 

Answer 2

के लिए मुझे पता है इन बातों को फैशन की इन दिनों बाहर हैं, लेकिन HTML image maps अभी भी मान्य हैं, और एक छवि के भीतर लगभग मनमानी आकार में हिट लक्ष्य जोड़ना पूरा कर सकते हैं। यदि आप वास्तव में क्लिक पर किसी अन्य पृष्ठ को फिर से लोड नहीं करना चाहते हैं, तो आप शायद इस तकनीक के साथ यूआरएल में एंकर बदल सकते हैं और जावास्क्रिप्ट अंतराल के साथ परिवर्तन उठा सकते हैं।

Answer 3

कैनवास इस उद्देश्य के लिए जाने का तरीका है। लेकिन यह भी याद रखें कि पुराने इंटरनेट एक्सप्लोरर संस्करण getImageData() फ़ंक्शन में सक्षम नहीं होंगे। यहां तक ​​कि यदि आप excanvas शामिल हैं।

मैंने इस उद्देश्य के लिए बिल्कुल एक छोटी jquery प्लगइन बनाई है, हो सकता है कि यह पहिया को पूरी तरह से पुनर्निर्मित किए बिना आपकी समस्या को हल करने में आपकी सहायता करेगा। http://www.cw-internetdienste.de/pixelselection/