Javascript 如何在画布上的图像上获取单击事件

我有一个创建程序，可以在画布上显示多个图像。现在我想使用放置在画布上的鼠标点击事件来获取图像数据。 我的JavaScript代码是-

var canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
canvas.width = 720;
canvas.height = 480;

//I got images data in one array 
var imageobj = new Array();
for (var d=0;d<calloutImageArray.length;d++)
{
    imageobj[d] = new Image();
    (function(d)
     imageobj[d].src = sitePath+"ATOM/chapter1/book/"+calloutImageArray[d];
     imageobj[d].onload = function() 
      {
        ctx.drawImage(imageobj[d], calloutImageArrayX[d], calloutImageArrayY[d],calloutImageArrayW[d], calloutImageArrayH[d]);
      }; 
   })(d);
}

var canvas=document.getElementById（“myCanvas”）；
ctx=canvas.getContext（“2d”）；
画布宽度=720；
canvas.height=480；
//我在一个数组中获得了图像数据
var imageobj=新数组（）；
对于（var d=0；d非常容易完成：

function handleMousedown(e){

    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();

    // get the mouse position
    var mouseX=e.clientX-BBoffsetX;
    var mouseY=e.clientY-BBoffsetY;

    // loop through each image and see if mouse is under
    var hit=-1;
    for(var i=0;i<imageobj.length;i++){
        var x=calloutImageArrayX[i];
        var y=calloutImageArrayY[i];
        var w=calloutImageArrayW[i];
        var h=calloutImageArrayH[i];
        if(mouseX>=x && mouseX<=x+w && mouseY>=y && mouseY<=y+h){
            hit=i;
        }
    }

    // you clicked the image with index==hit
    // so get its image data
    if(hit>=0){
        var imageData=ctx.getImageData(
            calloutImageArrayX[hit],
            calloutImageArrayY[hit],
            calloutImageArrayW[hit],
            calloutImageArrayH[hit]);

        // now do your thing with the imageData!

    }
}


使用
canvas.addEventListener

鼠标向下时，检查鼠标是否在任何图像内

获取鼠标下图像的图像数据


示例代码：

function handleMousedown(e){

    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();

    // get the mouse position
    var mouseX=e.clientX-BBoffsetX;
    var mouseY=e.clientY-BBoffsetY;

    // loop through each image and see if mouse is under
    var hit=-1;
    for(var i=0;i<imageobj.length;i++){
        var x=calloutImageArrayX[i];
        var y=calloutImageArrayY[i];
        var w=calloutImageArrayW[i];
        var h=calloutImageArrayH[i];
        if(mouseX>=x && mouseX<=x+w && mouseY>=y && mouseY<=y+h){
            hit=i;
        }
    }

    // you clicked the image with index==hit
    // so get its image data
    if(hit>=0){
        var imageData=ctx.getImageData(
            calloutImageArrayX[hit],
            calloutImageArrayY[hit],
            calloutImageArrayW[hit],
            calloutImageArrayH[hit]);

        // now do your thing with the imageData!

    }
}

单击图像
接受我的建议，使用fabricJS之类的工具，它会让你的生活变得非常轻松。因为你可以轻松地在画布上放置多个对象，还可以执行各种功能（缩放、旋转、平移）
除了@markE的答案外，你还可以使用画布库，例如kineticjs。查看形状中的鼠标检测：我尝试了你的答案。我得到了结果，但不正确。我还在调出图像的下方得到图像结果。我只需点击特定的调出图像即可获取图像数据。@KetanPatil I“我已经为您添加了一个工作演示。祝您项目顺利！@marksE感谢您的帮助。我从您的逻辑中获得了图像详细信息。再次感谢。@markE我的项目实际上使用了fabricjs，在使用简单画布时遇到了这个问题。由于Fabric，大多数问题都得到了简化，这就是为什么我建议使用它的原因。没有p这里有问题！我喜欢（有时也会使用）FabricJS——这是一个很棒的框架，我也会推荐它。但我的学习哲学是“只做一次没有框架”来理解事情是如何工作的以及为什么工作的。干杯！；-）@markE cool:）。。。我对fabricjs有问题，请告诉我是否可以解决：）