[英]get rgb values of pixel of image in fabric.js on mouse move
how to get rgb values of image in fabric.js on mouse move. 如何在鼠标移动中获取fabric.js中图像的rgb值。 I used getFill() method of image object, but it is returning (0,0,0).
我使用了图像对象的getFill()方法,但它返回(0,0,0)。 Please help me
请帮我
FabricJS does not have a native method for getting the pixel colors. FabricJS没有获取像素颜色的本机方法。
The workaround is to use native html5 canvas to fetch the pixel data: 解决方法是使用本机html5画布来获取像素数据:
Create your Fabric image objects. 创建Fabric图像对象。 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. 请确保将
crossOrigin
指定为“匿名”,否则画布将受到安全违规的污染,然后像素数据将不可用。
Listen on Fabric's 'mouse:move' event. 收听Fabric的'mouse:move'活动。 When it fires, get the current mouse position and use native canvas's
context.getImageData
to fetch that pixel's color array. 当它触发时,获取当前鼠标位置并使用本机画布的
context.getImageData
来获取该像素的颜色数组。
Good luck with your project! 祝你的项目好运!
Here's annotatede code and a Demo: 这是annotatede代码和演示:
// 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'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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.