javascript - Image map by alpha channel -

<img src="circle.png" onclick="alert('clicked')"/> 

let's imagine circle.png 400x400 px transparent background image circle in middle.

what i've got entire image area (400x400px) clickable. have circle (non transparent pixels) clickable.

of course know in example use <map> tag , circular area, i'm looking general solution take consideration actual image transparency , work kind of images (i.e. non regular shapes).

the complex way see trace contour of image basing on each pixel alpha, convert path (maybe simplify) , apply map.

is there more efficient / straightforward way so?

using canvas tag, can determine color value of pixel under given spot. can use event data determine coordinates, check transparency. remains loading image canvas.

first, we'll take care of that:

  var ctx = document.getelementbyid('canvas').getcontext('2d');   var img = new image();   img.onload = function(){     ctx.drawimage(img,0,0);   };   img.src = [your_url_here]; 

this first bit grabs canvas element, creates image object. when image loads, drawn on canvas. pretty straightforward! except... if image not on same domain code, you're against same-domain policy security. in order data of our image, we'll need image locally hosted. can base64 encode image, beyond scope of answer. (see this url tool so).

next, attach click event canvas. when click comes in, we'll check transparency , act non-transparent click regions:

    if (istransparentundermouse(this, e))         return;     // whatever need     alert('will something!'); 

the magic happens in function istransparentundermouse, needs 2 arguments: target canvas element (this in click handler's scope) , event data (e, in example). come meat:

var istransparentundermouse = function (target, evnt) {     var l = 0, t = 0;     if (target.offsetparent) {         var ele = target;         {             l += ele.offsetleft;             t += ele.offsettop;         } while (ele = ele.offsetparent);     }     var x = evnt.page.x - l;     var y = evnt.page.y - t;     var imgdata = target.getcontext('2d').getimagedata(x, y, 1, 1).data;     if (         imgdata[0] == 0 &&         imgdata[1] == 0 &&         imgdata[2] == 0 &&         imgdata[3] == 0     ){         return true;     }     return false; }; 

first, dancing around precise position of element in question. we're going use information pass canvas element. getimagedata give us, among other things, data object contains rgba of location specified.

if values 0, we're looking @ transparency. if not, there's color present. -edit- noted in comments, value need @ last, imgdata[3] in above example. values r(0)g(1)b(2)a(3), , transparency determined a, alpha. use same approach find color @ opacity know rgba data for.

try out here: http://jsfiddle.net/pj3md/1/

(note: in example, used base64 encoded image because of domain security mentioned. can ignore portion of code, unless intend on using base64 encoding)

same example, changes mouse cursor thrown in fun: http://jsfiddle.net/pj3md/2/

documentation

• image object on mdn - https://developer.mozilla.org/en/dom/image
• tutorial using images canvas on mdn - https://developer.mozilla.org/en/canvas_tutorial/using_images
• canvas portal on mdn - https://developer.mozilla.org/en/html/canvas
• html canvas element on mdn (getcontext) - https://developer.mozilla.org/en/dom/htmlcanvaselement/
• canvasrenderingcontext2d on mdn (getimagedata) - https://developer.mozilla.org/en/dom/canvasrenderingcontext2d
• pixel manipulation on mdn - https://developer.mozilla.org/en/html/canvas/pixel_manipulation_with_canvas/