Canvas getImageData使用graident给出错误的结果

Canvas getImageData giving wrong result with graident

本文关键字：错误 结果 出错 getImageData 使用 graident Canvas      更新时间：2023-09-26

我使用带有渐变的画布（填充颜色从实际值到白色不等），使用画布函数getimagedata 在任何点（单击鼠标）选择颜色

连线问题：Canvas.getImageImadata在某个地方给出了错误的值，并主要更正了

JSFIDDLE演示

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

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

$('#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对象。

改良小提琴

希望这能有所帮助！

相关文章：