Question

因此，我有一个<img>标记，其中包含onclick属性。 onclick调用名为analyze(this)的函数，其中this为图像。

analyze函数对图像做了一些不完全相关的事情，除了它将它绘制到<canvas>元素上（使用drawImage函数）。

但是现在，我想要选择我刚刚在图像中点击的颜色。我目前正在使用此处回答的方法（70+票的回答，而非选择的回答）：How do I get the coordinates of a mouse click on a canvas element?

但是，我想我可能做错了。我绘制了图像并调用了我的函数（这些都可以工作），但是没有调用颜色选择部分。我认为这是因为我实际上没有抓住这个事件。这通常是我的代码的外观：

<img onclick="javascript:analyze(this);" />

function analyze(img_elem) {
    // This is getting the canvas from the page and the image in it
    var canvaselement = document.getElementById('canvas').getContext('2d'),
        img = new Image();

    img.onload = function () {
        canvaselement.drawImage(img, 0, 0, 250, 250);

        ...

        canvaselement.onClick = function () {
            var coords = canvaselement.relMouseCoords(event);
            pick(img, canvaselement, coords); // pass in coordinates            
        }

    }

    img.src = img_elem.src;
}

function relMouseCoords(event) {
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var currentElement = this;

    do {
        totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
        totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
    }
    while (currentElement = currentElement.offsetParent)

    canvasX = event.pageX - totalOffsetX;
    canvasY = event.pageY - totalOffsetY;

    return {
        x: canvasX,
        y: canvasY
    }
}

function pick(img, canvaselement, coords) {
    var pickedColor = "";
    canvaselement.drawImage(img, 0, 0, 250, 250);

    xx = coords.x;
    yy = coords.y;
    var imgData = canvas.getImageData(xx, yy, 1, 1).data;

    pickedColor = rgbToHex(imgData);

    //alert(pickedColor);
    return pickedColor;
}

因此，代码永远不会进入pick函数。我有一种感觉，因为我实际上没有抓住onclick事件。我甚至不确定这是否是在画布上获取坐标的正确方法，我只是希望我现在可以进入调试过程的那一部分。

感谢您的帮助！

Answer 1

问题可能是您将canvaselement分配给getContext('2d')的结果，而不是分配给事件绑定所需的元素本身。创建两个变量，一个用于DOM元素本身，另一个用于上下文，如：

var canvaselement = document.getElementById('canvas'),
    canvaselementctx = canvaselement.getContext('2d');

...
canvaselement.onClick = function() {
    var coords = canvaselementctx.relMouseCoords(event);
    ...
}

Answer 2

您在代码中遇到了一些错误，但是您从链接帖子获得的代码的原因是您忘记包含它使用的原型定义：

HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;

现在你可以在canvas元素上调用relMouseCoords：

/// event name in lower case
canvaselement.onclick = function () {
    var coords = canvaselement.relMouseCoords(event);
    //...

但是，您仍然会遇到问题，因为您没有使用画布上下文进行绘图调用。

function analyze(img_elem) {
    // This is getting the canvas from the page and the image in it
    var canvaselement = document.getElementById('canvas').getContext('2d'),

        /// get context like this
        ctx = canvaselement.getContext('2d'),
        img = new Image();

    img.onload = function () {

        /// use context to draw
        ctx.drawImage(img, 0, 0, 250, 250);

        //...

如何捕获HTML中调用的onclick事件？

2 个答案: