为了账号安全,请及时绑定邮箱和手机立即绑定

怎么从画布上获取像素颜色

/ 猿问

怎么从画布上获取像素颜色

若吾皇 2019-10-21 16:12:30

从画布上获取像素颜色

是否可以在鼠标下获得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>




查看完整描述

3 回答

?
牧羊人nacy

这是一个完整的,独立的例子。首先,使用以下HTML:

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

相关的JavaScript:

// set up some sample squaresvar 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);}

参见在JSFIDDLE上的行动:



查看完整回答
反对 回复 2019-10-22
?
UYOU

我知道这是个老掉牙的问题,但这是另一个选择。然后,在画布上的鼠标移动事件中,我会将图像数据存储在数组中:


var index = (Math.floor(y) * canvasWidth + Math.floor(x)) * 4

var r = data[index]

var g = data[index + 1]

var b = data[index + 2]

var a = data[index + 3]

比每次获得ImageData要容易得多。



查看完整回答
反对 回复 2019-10-22
?
DIEA

合并了这里在StackOverflow(包括上面的文章)和其他站点中找到的各种引用,我使用了javascript和JQuery:

<html><body><canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.</canvas><script src="jquery.js"></script><script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var img = new Image();
        img.src = 'photo_apple.jpg';
        context.drawImage(img, 0, 0);
    };

    function findPos(obj){
    var current_left = 0, current_top = 0;
    if (obj.offsetParent){
        do{
            current_left += obj.offsetLeft;
            current_top += obj.offsetTop;
        }while(obj = obj.offsetParent);
        return {x: current_left, y: current_top};
    }
    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);
    }$('#myCanvas').click(function(e){
    var position = findPos(this);
    var x = e.pageX - position.x;
    var y = e.pageY - position.y;
    var coordinate = "x=" + x + ", y=" + y;
    var canvas = this.getContext('2d');
    var p = canvas.getImageData(x, y, 1, 1).data;
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    alert("HEX: " + hex);});</script><img src="photo_apple.jpg"/></body></html>

这是我的完全解决方案。这里我只使用画布和一张图片,但是如果你需要使用<map>在图像上,这也是可能的。



查看完整回答
反对 回复 2019-10-22

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信