Get X,Y Coordinate of Zoomed Image Pixels - KineticJs / HTML5 Canvas Image

Question

I am developing an application that allows users to upload photo, during uploading of the photo, the application performs detection on the server to get the photo’s region of interest (x, y, width and height), and return it to the client (browser).

On the client side, the user is required to adjust the region of interest by clicking on the locations perceived as the edges. See below image.

My main challenges are:

(1) How do I zoom to the exact region of interest given the x, y, width and height returned from the server?

So far this is my solution to this problem:

    var maxWidth = stage.getWidth();
var maxHeight = stage.getHeight();  

var imageObj = new Image();
imageObj.src = "image.jpg";

$(imageObj).load(function(){

var ratio = 1;

 if(imageObj.width > maxWidth)
     ratio = maxWidth / imageObj.width;
 else if(imageObj.height > maxHeight)
     ratio = maxHeight / imageObj.height;

var w = imageObj.width * ratio;
var h = imageObj.height * ratio;

  //region of interest
var roiX = 5;
var roiY = 30;
var roiW = 207;
var roiH = 252;

var face = new Kinetic.Image({
    x: -roiX,
    y: -roiY,
    image: imageObj,
    width: w,
    height: h,
    draggable: true,
    scale: {x:1.7, y:1.7}
});

    layer.add(face);
    stage.add(layer);
});

As you can see, my solution is not putting the width and height returned from the server into perspective on the scaling. I really don’t know how to perform the calculation to get the ratio to zoom within the width and height.

(2) I want to get the x and y coordinate of each clicked pixel of the image (which I’ll save somewhere on the server for later use).

(3) Haven the x, y coordinate values, how do I locate the pixels position on the same image (With or without scale applied on the image)?

Answer 1

Just addressing your main challenge here. What you want to do is draw the canvas, then move and scale so that you zoom in on a proper area.

First you need the transform: http://kineticjs.com/docs/symbols/Kinetic.Node.php#getTransform
apply this as :

 layer.getTransform() or face.getTransform() // whether you want to move just the face or the whole layer

Then you need to modify the transform: http://kineticjs.com/docs/symbols/Kinetic.Transform.php

 face.translate(x, y); // move the image (can also do layer) 
 face.scale(sx, sy); // zoom by a scale of x and scale of y 
 layer.draw(); // redraw to see effect

This is a useful link: Zoom in a canvas using canvas.scale function?