CODEWITHSUNDEEP
javascripthtml5-canvaskineticjs
realtallpaul
realtallpaul

Reputation: 93

Getting pixel data from Kinetic JS Image

I am using Kinetic JS to display an image, and I would like to implement a magnify function.

So basically I would like to copy the area of the image which the mouse pointer is hovering over, scale it, and display it elsewhere on the screen.

You can grab HTML5 canvas pixel data with the canvas context.getImageData() function, but is there another way to do this in Kinetic JS or should I just try to get the image's underlying context and use the getImageData function?

Thanks

Upvotes: 0

Views: 1506

Answers (2)

ericbowden
ericbowden

Reputation: 2205

KineticJS just uses regular canvases so getImageData works. Just grab the context that you want.

$('#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/

However things get a bit tricker once you add more layers to the stage. You would have to loop through each canvas and grab the pixel.

Upvotes: 2

Eric Rowell
Eric Rowell

Reputation: 5219

hold on. you don't need to use pixel data to magnify an image. just use scale:

image.setScale(3);

if you need a clone of the original image, you can clone it first

var clone = image.clone();

Upvotes: 0

Related Questions