0

I have an image with class rubikscube. When a user leaves the image with the mouse I have this code below:

jQuery

$('#container').on('mouseleave', '.rubikscube', function(e) {                   
    //Do something
});

html

<div id="container">
    <img class="rubikscube" alt="demo" src="demo.png" style="width:313px;height:285px;" />
</div>

This works fine!

My question is: If the image has a lot of space (the actual image is in the middle of the "image-container" and a lot of "space/white" is surronding the actual image...

Is it possible to trigger "mouseleave" when leaving the "actual picture" (The image - container below is 313 x 285 but the the rubiks cube could be cropped and still remain intact)

I'm wondering if something like this is possible?

enter image description here

UPDATE

I've came up with this:

  $('#content-area').on('mousemove', '.image-holder', function(e) {     

            //Get color of image at cursor
            var imageSource = $(this).find("img").attr("src");

            var img = new Image();
            img.src = imageSource; 
            var canvas = $(this).find(".canvas-wrapper").find("canvas")[0];            //This seems to get correct canvas

            //Get X and Y within canvas
            var elementOffset = $(this).offset();
            var relX = e.pageX - elementOffset.left;
            var relY = e.pageY - elementOffset.top;       

             //Now that image has loaded into canvas, then see if mouse is over white or transparent 
             //part of image
            img.onload = function(){
                 var userMovedOutsideImage = false;
                 var ctx = canvas.getContext('2d');          
                 ctx.drawImage(img,0,0);

                 var pixel = ctx.getImageData(relX, relY, 1, 1);
                 var data = pixel.data;

                //White area of image (rgba)
                 if (parseInt(data[0]) == 255 && parseInt(data[1]) == 255 && parseInt(data[2]) == 255 && parseInt(data[3]) == 255) {
                        userMovedOutsideImage = true;
                 }

                 console.log (userMovedOutsideImage);
            };

but if the image has only one pixel of white in the actual image. then userMovedOutsideImage would return true. I want it to more restrictive within an area of maybe 30x30 pixels (that is totally white or totally transparent) or so. But how do I do the comparision then? 

img.onload = function(){
                 var userMovedOutsideImage = false;
                 var ctx = canvas.getContext('2d');          
                 ctx.drawImage(img,30,30);

                 var pixel = ctx.getImageData(relX, relY, 30, 30);
                 var data = pixel.data;

                //White area of image (rgba)

                 //How do I know if the whole area is white?
                 if (parseInt(data[0]) == 255 && parseInt(data[1]) == 255 && parseInt(data[2]) == 255 && parseInt(data[3]) == 255) {
                        userMovedOutsideImage = true;
                 }
                 if (userMovedOutsideImage == true) {
                     console.log (userMovedOutsideImage);
                }

            };
bestprogrammerintheworld
  • 5,417
  • 7
  • 43
  • 72
  • 1
    If possible , can post stacksnippets http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ , http://jsfiddle.net including image ? See https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas#A_color_picker – guest271314 Feb 19 '15 at 04:09
  • 2
    You could compare the color under the cursor inside a canvas. When it's white or transparent (depending on your image), you could then call your function. Have a look here for some ideas about getting the color: http://stackoverflow.com/questions/1936021/javascript-eyedropper-tell-color-of-pixel-under-mouse-cursor – Chief Wiggum Feb 19 '15 at 04:12
  • you have to crop the image. and if you want white space add through padding and margin. Then bind the mouse-enter and leave to image, not the container div. – PRAH Feb 19 '15 at 04:13
  • Thanks for the comments. Crop the image? Yes, but then I would have to figure out where the actual image should be cropped in each case? The link that shows how to get color of the image might work for me. If the mouse is moving on a part that is white then I have my "mouseleave()- trigger". – bestprogrammerintheworld Feb 19 '15 at 04:22

0 Answers0