Get rgb values ​​of the image pixel in the fabric.js file when moving the mouse

Question

how to get rgb values ​​of an image in fabric.js file when moving the mouse. I used the getFill () method of the image object, but it returns (0,0,0). Please help me

Answer 1

FabricJS does not have a native method for obtaining pixel colors.

The workaround is to use your own html5 canvas to extract pixel data:

• Create Fabric Image Objects. Be sure to specify crossOrigin as "anonymous", otherwise the canvas will be corrupted by a security violation, and then the pixel data will not be available.

• Listen to the Fabric mouse: move event. When it fires, find the current mouse position and use your own canvas context.getImageData to get this color array of pixels.

Good luck with your project!

Here's the annotated code and 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(ee); 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 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>