在鼠标移动中获取fabric.js中图像像素的rgb值 [英] get rgb values of pixel of image in fabric.js on mouse move

问题描述

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

how to get rgb values of image in fabric.js on mouse move. I used getFill() method of image object, but it is returning (0,0,0). Please help me

推荐答案

FabricJS没有获取像素颜色的原生方法。

FabricJS does not have a native method for getting the pixel colors.

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

The workaround is to use native html5 canvas to fetch the pixel data:

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

• Create your Fabric image objects. Be sure to specify crossOrigin as 'anonymous' otherwise the canvas will be tainted with a security violation and then the pixel data will be unavailable.

收听Fabric的'mouse：move'事件。当它触发时，获取当前鼠标位置并使用原生画布的 context.getImageData 来获取该像素的颜色数组。

Listen on Fabric's 'mouse:move' event. When it fires, get the current mouse position and use native canvas's context.getImageData to fetch that pixel's color array.

祝你的项目好运！

这是annotatede代码和演示：

Here's annotatede code and a Demo:

// 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://dl.dropboxusercontent.com/u/139992952/multple/colorBar.png');

// 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>

这篇关于在鼠标移动中获取fabric.js中图像像素的rgb值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！