6
如何在鼠标移动过程中获取fabric.js中图像的rgb值。我用getFill()图像对象的方法,但它返回(0,0,0)。请帮助我在鼠标移动过程中获取fabric.js中图像像素的rgb值
如何在鼠标移动过程中获取fabric.js中图像的rgb值。我用getFill()图像对象的方法,但它返回(0,0,0)。请帮助我在鼠标移动过程中获取fabric.js中图像像素的rgb值
FabricJS没有获取像素颜色的本机方法。
的解决方法是使用原生HTML5画布,以获取像素数据:
创建织物图像对象。请务必将crossOrigin
指定为“匿名”,否则画布将受到安全违规的污染,然后像素数据将不可用。
监听Fabric的'mouse:move'事件。当它触发时,获取当前鼠标位置并使用本地画布的context.getImageData
来获取该像素的颜色数组。
祝您的项目顺利!
这里的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(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>
纽约答案。爱你 – 2014-11-18 11:19:07
@markE - 如何应用此方法获取整个画布中的像素细节?应该通过画布循环?怎么做? – Dissanayake 2016-03-25 08:52:34
@Dissanayake。您可以像这样获取所有像素的数据:var allPxArray = ctx.getImageData(0,0,canvas.width,canvas.height).data;'。他们排列如下:r0,g0,b0,a0,r1,g1,b1,a1 ... :-) ' – markE 2016-03-25 16:23:42