How to make it so that Hovering Over Transparency in a PNG doesn't count as hovering?

前端未结

关注

 2  2134

When I hover over the transparent part of a PNG, it still acts as though I\'m hovering over the actual image. Is there a way that I can prevent that from happening? So that it o

Can be done by converting png to canvas element

This works by loading a png into an HTML-5 canvas element, and then querying the canvas for the alpha value of the clicked pixel.

Working demo: http://jsfiddle.net/x9ScK/3/

HTML as follows...

<!-- create a canvas element to hold the PNG image -->
<canvas id="canvas1" width="500" height="500"></canvas>

Javascript like this...

// select the canvas element with jQuery, and set up
// a click handler for the whole canvas
$('#canvas1').on('click', function(e) {
    // utility function for finding the position of the clicked pixel
    function findPos(obj) {
        var curleft = 0, curtop = 0;
        if (obj.offsetParent) {
            do {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
            return { x: curleft, y: curtop };
        }
        return undefined;
    }
    // get the position of clicked pixel
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    // get reference to canvas element clicked on
    var canvas = this.getContext('2d');
    // return array of [RED,GREEN,BLUE,ALPHA] as 0-255 of clicked pixel
    var pixel = canvas.getImageData(x, y, 1, 1).data;
    // if the alpha is not 0, we clicked a non-transparent pixel
    // could be easily adjusted to detect other features of the clicked pixel
    if(pixel[3] != 0){
        // do something when clicking on image...
        alert("Clicked the dice!");
    }
});

// get reference to canvas DOM element
var canvas = $('#canvas1')[0];
// get reference to canvas context
var context = canvas.getContext('2d');

// create an empty image
var img = new Image();
// after loading...
img.onload = function() {
    // draw the image onto the canvas
    context.drawImage(img, 0, 0);
}

// set the image source (can be any url - I used data URI to keep demo self contained)
img.src = "data:image/png;base64,iVBORw0KGgoAAAANS ... more image data ...TkSuQmCC"; // PNG with transparency

0 讨论(0)

春和景丽

2021-02-09 20:19
I know I've seen sites that let you "choose a color" based on the pixel you're hovering over. I'm not sure how they do it, but one option is to create an html image map (like this), so that different parts of your PNG trigger the "hover" and other parts don't. In essence, the mouse isn't hovering over the PNG; it's hovering over areas that you define in your HTML.

Here's an example that I took directly from the link above:
```
<body>
<img src="trees.gif" usemap="#green" border="0">
<map name="green">
<area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98"     href="http://www.trees.com/save.html">
<area shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
<area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
</map>
</body>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...