从Kinetic JS Image获取像素数据

我正在使用Kinetic JS来显示图像，并且我想要实现放大功能。从Kinetic JS Image获取像素数据

所以基本上我想复制鼠标指针悬停在图像上的区域，缩放它，并将它显示在屏幕上的其他地方。

您可以使用canvas context.getImageData（）函数获取HTML5 canvas像素数据，但是在Kinetic JS中还有另一种方法来做到这一点，或者我应该尝试获取图像的底层上下文并使用getImageData函数？

感谢

2013-05-16 realtallpaul

KineticJS只是使用普通的帆布所以getImageData工作。只需抓住你想要的上下文。

$('#canvas').mousemove(function(e) { 
    var pos = findPos(this); 
    var x = e.pageX - pos.x; 
    var y = e.pageY - pos.y; 
    var coord = "x=" + x + ", y=" + y; 
    var c = this.getContext('2d'); 
    var p = c.getImageData(x, y, 1, 1).data; 
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6); 
    //do something with the color 
});

http://jsfiddle.net/7MMK2/26/

但是事情变得有一些技巧，一旦你添加更多的图层舞台。您将不得不遍历每个画布并抓取像素。

来源

2013-05-16 21:32:57 ericbowden

我结束了使用drawImage（）获取像素数据并在屏幕上的其他地方写了一个放大版本，但是这绝对是指向正确的方向。非常感谢！ – realtallpaul

坚持。您不需要使用像素数据来放大图像。只是使用比例尺：

image.setScale（3）;

如果你需要原始图像的副本，你可以克隆它首先

VAR克隆= image.clone（）;

来源

2013-05-19 04:17:48

我需要放大较大图像的一个小区域，所以这可能有效，但我需要在克隆图像上缩放，然后进行平移，以便正确放大放大点。谢谢你的提示。 – realtallpaul

从Kinetic JS Image获取像素数据

回答

相关问题