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

Posted

技术标签:

【中文标题】在鼠标移动时获取fabric.js中图像像素的rgb值【英文标题】:get rgb values of pixel of image in fabric.js on mouse move 【发布时间】:2015-01-02 18:43:51 【问题描述】:

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

【问题讨论】:

【参考方案1】:

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

解决方法是使用原生 html5 画布来获取像素数据:

创建您的 Fabric 图像对象。请务必将crossOrigin 指定为“匿名”,否则画布将受到安全违规的污染,然后像素数据将不可用。

收听 Fabric 的“鼠标:移动”事件。当它触发时,获取当前鼠标位置并使用原生画布的context.getImageData 来获取该像素的颜色数组。

祝你的项目好运!

这是注释代码和演示:

// create a Fabric.Canvas
var canvas = new fabric.Canvas("canvas");

// get a reference to <p id=results></p>
// (used to report pixel color under mouse)
var results = document.getElementById('results');

// get references to the html canvas element & its context
var canvasElement = document.getElementById('canvas');
var ctx = canvasElement.getContext("2d");


// create a test Fabric.Image
addFabricImage('https://cdn.pixabay.com/photo/2019/12/12/05/34/afro-4689826_1280.jpg');

// listen for mouse:move events
canvas.on('mouse:move', function(e) 

  // get the current mouse position
  var mouse = canvas.getPointer(e.e);
  var x = parseInt(mouse.x);
  var y = parseInt(mouse.y);

  // get the color array for the pixel under the mouse
  var px = ctx.getImageData(x, y, 1, 1).data;

  // report that pixel data
  results.innerHTML = 'At [' + x + ' / ' + y + ']: Red/Green/Blue/Alpha = [' + px[0] + ' / ' + px[1] + ' / ' + px[2] + ' / ' + px[3] + ']';

);



// create a Fabric.Image at x,y using a specified imgSrc
function addFabricImage(imgSrc, x, y) 

  // create a new javascript Image object using imgSrc
  var img = new Image();

  // be sure to set crossOrigin or else 
  // cross-domain imgSrc's will taint the canvas
  // and then we can't get the pixel data
  // IMPORTANT!: the source domain must be properly configured 
  // to allow crossOrigin='anonymous'
  img.crossOrigin = 'anonymous';

  // when the Image object is fully loaded, 
  // use it to create a new fabric.Image object
  img.onload = function() 

    var fabImg = new fabric.Image(this, 
      left: 30,
      top: 30
    );
    canvas.add(fabImg);

  

  // use imgSrc as the image source
  img.src = imgSrc;

body 
  background-color: ivory;

canvas 
  border: 1px solid red;
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<p id="results">Move mouse over canvas</p>
<canvas id=canvas width=300 height=300></canvas>

【讨论】:

@markE - 如何应用此方法获取整个画布中的像素细节?应该遍历画布吗?该怎么做? @Dissanayake。您可以像这样获取所有像素的数据:var allPxArray = ctx.getImageData(0,0,canvas.width,canvas.height).data;。它们的排列方式如下:r0,g0,b0,a0, r1,g1,b1,a1 ... :-) ` @markE 这不再准确。它没有显示正确的颜色值。它一直有效到fabric.js v 1.5.0,但之后代码不会产生正确的rgb值。当它返回 rgb 值时存在某种偏移。我正在使用 v 2.2.4,我被困在这一点上。 这可能真的很晚了,但是无论如何可以获取对象背后的颜色吗?我正在移动织物中的一个对象,并希望获得用户移动它的对象背后的颜色,而不是对象本身的颜色。

以上是关于在鼠标移动时获取fabric.js中图像像素的rgb值的主要内容,如果未能解决你的问题,请参考以下文章

Fabric.js 逐像素操作 Image 对象以改变颜色

Fabric.js 逐像素操作 Image 对象以改变颜色

Keras中图像分割的像素损失权重

如何使节点画布中图像的大小始终为 128 像素

如何在 Fabric.js 上获取鼠标坐标?

裁剪图像时,新图像获取canvas padding fabric js