Javascript 鼠标移动时获取fabric.js中图像像素的rgb值

如何在鼠标移动时获取fabric.js中图像的rgb值。我使用了image对象的getFill（）方法，但它正在返回（0,0,0）。请帮助我

FabricJS没有获取像素颜色的本机方法

解决方法是使用本机html5画布获取像素数据：

• 创建织物图像对象。确保将

  crossOrigin

  指定为“匿名”，否则画布将受到安全冲突的污染，像素数据将不可用

• 收听Fabric的“鼠标：移动”事件。当它触发时，获取当前鼠标位置并使用本机画布的

  context.getImageData

  获取该像素的颜色数组

祝你的项目好运

以下是注释代码和演示：

//创建一个Fabric.Canvas
var canvas=newfabric.canvas（“画布”）；
//获取对

//（用于报告鼠标下的像素颜色）
var results=document.getElementById（'results'）；
//获取对html画布元素及其上下文的引用
var canvasElement=document.getElementById（'canvas'）；
var ctx=canvasElement.getContext（“2d”）；
//创建一个测试结构
addFabricImage（'https://dl.dropboxusercontent.com/u/139992952/multple/colorBar.png');
//侦听鼠标：移动事件
canvas.on（'mouse:move'，函数（e）{
//获取当前鼠标位置
var mouse=canvas.getPointer（e.e）；
var x=parseInt（mouse.x）；
var y=parseInt（mouse.y）；
//获取鼠标下像素的颜色数组
var px=ctx.getImageData（x，y，1，1）.data；
//报告像素数据
results.innerHTML='在['+x+'/'+y+']：红/绿/蓝/阿尔法=['+px[0]+'/'+px[1]+'/'+px[2]+'/'+px[3]+']；
});
//使用指定的imgSrc在x，y处创建Fabric.Image
函数addFabricImage（imgSrc，x，y）{
//使用imgSrc创建新的javascript图像对象
var img=新图像（）；
//一定要设置交叉原点，否则
//跨域imgSrc将污染画布
//然后我们就不能得到像素数据了
//重要提示！：必须正确配置源域
//要允许交叉源=“匿名”
img.crossOrigin='匿名'；
//当图像对象完全加载时，
//使用它创建一个新的fabric.Image对象
img.onload=函数（）{
var fabImg=新的fabric.Image（此{
左:30,，
排名：30
});
canvas.add（fabImg）；
}
//使用imgSrc作为图像源
img.src=imgSrc；
}

正文{
背景颜色：象牙色；
}
帆布{
边框：1px纯红；
}

将鼠标移到画布上

@markE-如何应用此方法在整个画布中获取像素细节？应该在画布上循环吗？怎么做？@Dissanayake。您可以像这样获取所有像素的数据：

var allPxArray=ctx.getImageData（0,0，canvas.width，canvas.height）。它们是这样排列的：r0、g0、b0、a0、r1、g1、b1、a1…：-）`@马克：这不再准确。它没有显示正确的颜色值。它一直工作到fabric.jsv1.5.0，但在这之后，代码不会产生正确的rgb值。返回rgb值时会出现某种偏移。我用的是v2.2.4，我在这一点上卡住了。这可能真的很晚了，但是有没有办法得到物体背后的颜色呢？我正在移动织物中的一个对象，希望得到用户移动它的对象后面的颜色，而不是对象本身的颜色。