Fatal编程技术网
  • javascript/
  • Javascript 在鼠标移动中从画布获取像素颜色

Javascript 在鼠标移动中从画布获取像素颜色

javascript html jquery canvas

Javascript 在鼠标移动中从画布获取像素颜色,javascript,html,jquery,canvas,getimagedata,Javascript,Html,Jquery,Canvas,Getimagedata,是否可以在鼠标下获取RGB值像素？有完整的例子吗？以下是我目前掌握的情况： 函数绘图（）{ var ctx=document.getElementById（'canvas'）.getContext（'2d'）； var img=新图像（）； img.src='您的URL'； img.onload=函数（）{ ctx.drawImage（img，0,0）； }; canvas.onmousemove=函数（e）{ var mouseX，mouseY； 如果（e.offsetX）{ mouseX=e

是否可以在鼠标下获取RGB值像素？有完整的例子吗？以下是我目前掌握的情况：

函数绘图（）{
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
var img=新图像（）；
img.src='您的URL'；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
};
canvas.onmousemove=函数（e）{
var mouseX，mouseY；
如果（e.offsetX）{
mouseX=e.offsetX；
mouseY=e.offsetY；
}
否则如果（如layerX）{
mouseX=e.layerX；
mouseY=e.layerY；
}
var c=ctx.getImageData（mouseX，mouseY，1，1）；
$（'#ttip'）.css（{'left'：mouseX+20，'top'：mouseY+20}）.html（c[0]+'-'+c[1]+'-'+c[2]）；
};
}
下面是一个完整的、自包含的示例。首先，使用以下HTML：

<canvas id="example" width="200" height="60"></canvas>
<div id="status"></div>
并在鼠标上方打印每种颜色：

$('#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);
});

$（“#示例”）.mousemove（函数（e）{
var pos=findPos（本）；
var x=e.pageX-位置x；
变量y=e.pageY-位置y；
var coord=“x=”+x+”，y=“+y；
var c=this.getContext（'2d'）；
var p=c.getImageData（x，y，1，1）；
var hex=“#”+（“000000”+rgbToHex（p[0]，p[1]，p[2]）。切片（-6）；
$（'#status'）.html（坐标+“
”+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);
}

function randomInt(max) {
  return Math.floor(Math.random() * max);
}

function randomColor() {
    return `rgb(${randomInt(256)}, ${randomInt(256)}, ${randomInt(256)})`
}

函数findPos（obj）{
var curleft=0，curtop=0；
if（对象抵销父对象）{
做{
curleft+=obj.offsetLeft；
curtop+=对象偏移量；
}而（对象=对象抵销母公司）；
返回{x:curleft，y:curtop}；
}
返回未定义；
}
函数rgbToHex（r、g、b）{
如果（r>255 | | g>255 | b>255）
抛出“无效颜色组件”；
返回（（r 255 | g>255 | b>255）
抛出“无效颜色组件”；

return（（r合并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>




您的浏览器不支持画布元素。
window.onload=函数（）{
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var img=新图像（）；
img.src='photo_apple.jpg'；
drawImage（img，0,0）；
};
功能findPos（obj）{
var current_left=0，current_top=0；
if（对象抵销父对象）{
做{
当前_left+=obj.offsetLeft；
当前_top+=对象偏移；
}而（对象=对象抵销母公司）；
返回{x:current\u left，y:current\u top}；
}
返回未定义；
}
函数rgbToHex（r、g、b）{
如果（r>255 | | g>255 | b>255）
抛出“无效颜色组件”；
返回（（r）快速回答

context.getImageData（x，y，1，1）.data；
返回rgba数组。例如
[50，50，50，255]



这里是@lwburk的rgbToHex函数的一个版本，它将rgba数组作为参数


function rgbToHex(rgb){
  return '#' + ((rgb[0] << 16) | (rgb[1] << 8) | rgb[2]).toString(16);
};



功能rgbToHex（rgb）{

返回“#”+（（rgb[0]我知道这是一个老问题，但这里有一个替代方案。
我将该图像数据存储在一个数组中，然后在画布上的鼠标移动事件：


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]



比每次获取图像数据容易得多。
我有一个从画布获取像素颜色的非常简单的工作示例

首先是一些基本的HTML：


<canvas id="myCanvas" width="400" height="250" style="background:red;" onmouseover="echoColor(event)">
</canvas>



下面是一个示例，请看控制台。
您可以尝试。这是在画布中选择颜色的一种简单方法。请参阅。
每次调用getImageData都会减慢过程……为了加快速度，我建议您存储图像数据，然后您可以轻松快速地获取pix值，因此请执行类似操作以获得更好的性能


// keep it global
let imgData = false;  // initially no image data we have

// create some function block 
if(imgData === false){   
  // fetch once canvas data     
  var ctx = canvas.getContext("2d");
  imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
}
    // Prepare your X Y coordinates which you will be fetching from your mouse loc
    let x = 100;   // 
    let y = 100;
    // locate index of current pixel
    let index = (y * imgData.width + x) * 4;

        let red = imgData.data[index];
        let green = imgData.data[index+1];
        let blue = imgData.data[index+2];
        let alpha = imgData.data[index+3];
   // Output
   console.log('pix x ' + x +' y '+y+ ' index '+index +' COLOR '+red+','+green+','+blue+','+alpha);


@Wayne Burkett的很好。如果您还想提取alpha值以获得rgba颜色，我们可以这样做：


var r=p[0]，g=p[1]，b=p[2]，a=p[3]/255；
var rgba=“rgb（“+r+”、“+g+”、“+b+”、“+a+”）；


我将alpha值除以255，因为ImageData对象将其存储为0到255之间的整数，但大多数应用程序（例如，
CanvasRenderingContext2D.fillRect（）
）要求颜色采用有效的CSS格式，其中alpha值介于0和1之间


（还要记住，如果提取一种透明颜色，然后将其绘制回画布上，它将覆盖之前存在的任何颜色。因此，如果在同一个点上绘制颜色
rgba（0,0,0,0.1）
10次，它将是黑色的。）
如果您需要获得矩形区域的平均颜色，而不是单个像素的颜色，请查看另一个问题：


你能看看这件事有没有解决办法吗？我非常感谢：）你使用嵌套的
offsetParent
s是一个非常好的方法。我从来没有想过。但是为什么你不使用常规的
while
循环，而不是
if
，然后使用
do…while
？这个答案今天（2017年9月1日）对我很有帮助。所以+1@AlivetoDie#100！谢谢：）这只适用于16以上的红色值，例如
[10,42,67,255]
生成的
#a2a43
不是有效的/格式良好的十六进制颜色代码。非常有用+1谢谢，这正是我所需要的。现在我可以找到饼图的哪个部分被单击。我将其转换为typescript。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(10, 10, 50, 50);

function echoColor(e){
    var imgData = ctx.getImageData(e.pageX, e.pageX, 1, 1);
    red = imgData.data[0];
    green = imgData.data[1];
    blue = imgData.data[2];
    alpha = imgData.data[3];
    console.log(red + " " + green + " " + blue + " " + alpha);  
}



// keep it global
let imgData = false;  // initially no image data we have

// create some function block 
if(imgData === false){   
  // fetch once canvas data     
  var ctx = canvas.getContext("2d");
  imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
}
    // Prepare your X Y coordinates which you will be fetching from your mouse loc
    let x = 100;   // 
    let y = 100;
    // locate index of current pixel
    let index = (y * imgData.width + x) * 4;

        let red = imgData.data[index];
        let green = imgData.data[index+1];
        let blue = imgData.data[index+2];
        let alpha = imgData.data[index+3];
   // Output
   console.log('pix x ' + x +' y '+y+ ' index '+index +' COLOR '+red+','+green+','+blue+','+alpha);