在鼠标悬停时从画布获取像素颜色

Question

是否可以在鼠标下获取RGB值像素？有完整的例子吗？这是我到目前为止的内容：

<script>
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.src = 'Your URL';

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


  };

  canvas.onmousemove = function(e) {
        var mouseX, mouseY;

        if(e.offsetX) {
            mouseX = e.offsetX;
            mouseY = e.offsetY;
        }
        else if(e.layerX) {
            mouseX = e.layerX;
            mouseY = e.layerY;
        }
        var c = ctx.getImageData(mouseX, mouseY, 1, 1).data;

        $('#ttip').css({'left':mouseX+20, 'top':mouseY+20}).html(c[0]+'-'+c[1]+'-'+c[2]);
  };
}

</script>

Answer 1

这是一个完整的，独立的示例。首先，使用以下HTML：

<canvas id="example" width="200" height="60"></canvas>
<div id="status"></div>

相关的JavaScript：

// set up some sample squares
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(0, 0, 50, 50);
context.fillStyle = "rgb(0,0,255)";
context.fillRect(55, 0, 50, 50);

$('#example').mousemove(function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coord = "x=" + x + ", y=" + y;
    var c = this.getContext('2d');
    var p = c.getImageData(x, y, 1, 1).data; 
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    $('#status').html(coord + "<br>" + hex);
});

上面的代码假定存在jQuery和以下实用程序功能：

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}



// set up some sample squares

var example = document.getElementById('example');

var context = example.getContext('2d');

context.fillStyle = "rgb(255,0,0)";

context.fillRect(0, 0, 50, 50);

context.fillStyle = "rgb(0,0,255)";

context.fillRect(55, 0, 50, 50);



$('#example').mousemove(function(e) {

    var pos = findPos(this);

    var x = e.pageX - pos.x;

    var y = e.pageY - pos.y;

    var coord = "x=" + x + ", y=" + y;

    var c = this.getContext('2d');

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

    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);

    $('#status').html(coord + "<br>" + hex);

});



function findPos(obj) {

    var curleft = 0, curtop = 0;

    if (obj.offsetParent) {

        do {

            curleft += obj.offsetLeft;

            curtop += obj.offsetTop;

        } while (obj = obj.offsetParent);

        return { x: curleft, y: curtop };

    }

    return undefined;

}



function rgbToHex(r, g, b) {

    if (r > 255 || g > 255 || b > 255)

        throw "Invalid color component";

    return ((r << 16) | (g << 8) | b).toString(16);

}


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<canvas id="example" width="200" height="60"></canvas>

<div id="status"></div>