Question

我使用渐变画布（填充颜色从实际值变为白色）以使用画布函数getimagedata在任何点（鼠标单击）选择颜色

有线问题：Canvas.getImageImadata在某处提供了错误的值并且主要纠正了一个

Answer 1

您需要更正鼠标位置，使其相对于画布。默认情况下，它相对于客户端窗口。

要纠正，您可以执行以下操作：

$('#myCanvas').click(function(e) {

    var r = $('#myCanvas')[0].getBoundingClientRect();  // get canvas abs. pos.
    //OR
    //var r = $('#myCanvas').position();
    x = e.clientX - r.left;                             // make relative
    y = e.clientY - r.top;

    var data=ctx.getImageData(x,y,1,1).data;

    $('#feedback').html("Red : "+data[0]+" __  Green : " +
                        data[1]+" __  Blue : "+data[2]+" __  Alpha : "+data[3])
});

否则，您将在画布外部进行采样，这将给出一个空白的ImageData对象。

<强> Modified fiddle

希望这有帮助！

Canvas getImageData使用渐变给出错误的结果

1 个答案: