2

所以，我有一个具有属性的<img>标签。调用一个名为 的函数onclick，作为图像。onclickanalyze(this)this

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

但是现在，我还想选择我刚刚在图像中单击的颜色。我目前正在使用此处回答的方法（70 多票的答案，而不是选择的答案）：如何获取鼠标在画布元素上单击的坐标？

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

<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事件。我什至不确定这是否是在画布上获取坐标的正确方法，我只是希望此时我什至可以进入调试过程的那一部分。

谢谢你的帮助！

4

2 回答 2

0

您的代码中有几个错误，但是您从链接帖子中获得的代码的原因是您忘记包含它使用的原型定义：

HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;

现在您可以调用relMouseCoordscanvas 元素：

/// 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);

        //...
于 2013-08-07T19:11:11.100 回答
0

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

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

...
canvaselement.onClick = function() {
    var coords = canvaselementctx.relMouseCoords(event);
    ...
}
于 2013-08-07T17:36:50.353 回答