鼠标移动时获取fabric.js中图像像素的rgb值
get rgb values of pixel of image in fabric.js on mouse move
如何在鼠标移动时获取fabric.js中图像的rgb值。我使用了图像对象的getFill()方法,但它正在返回(0,0,0)。请帮助我
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>
相关文章:
- 点击(右键点击)使用传单地图库获取图像覆盖的像素坐标
- 画布:逐像素绘制图像并请求动画帧计时
- 获取图像的平均外部像素颜色
- 使用回调获取图像像素数据
- ExtJS:“图像”类型的精灵:如何更改像素
- 从 JavaScript 中的图像中读取像素数据会返回半透明像素的意外结果
- 如何在Imgareaselect中选择图像根据像素进行选择
- 在图像像素加载时提交表单
- 使用像素检测后无法拖动Kinetic.JS图像
- 在CSS中按半像素移动的图像插值
- 裁剪后的图像大于 coppit.js 中以像素为单位的内在大小
- 将跟踪像素添加到 jQuery 图像轮播中的每个图像
- Javascript - 如何使用基于站点像素颜色的画布创建图像
- 如何将画布图像数据转换为具有适当 x,y 的每像素文本值数组
- HTML/javascript 获取(和设置)像素 - 远程图像
- 在 JavaScript 画布中获取图像的颜色像素
- 如何将图像像素转换为纬度和液化天然气中的相同位置以供谷歌地图使用
- 图像的模糊/像素化预加载
- HTML5,在加载时将像素渲染为图像,以加快绘制时间
- 获取图像的第一个像素颜色(JS/jQuery)