获取缩放图像像素的X、Y坐标-KineticJs/HTML5画布图像

我正在开发一个应用程序，允许用户上传照片，在上传照片的过程中，应用程序在服务器上执行检测，以获取照片的感兴趣区域x、y、宽度和高度，并将其返回到客户端浏览器

在客户端，用户需要通过单击被视为边缘的位置来调整感兴趣的区域。见下图

我的主要挑战是：

1根据服务器返回的x、y、宽度和高度，如何缩放到感兴趣的确切区域

到目前为止，这是我对这个问题的解决方案：

    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);
});

如您所见，我的解决方案不是将从服务器返回的宽度和高度放在缩放的透视图中。我真的不知道如何进行计算，以获得宽度和高度范围内的缩放比例

2我想得到图像中每个点击像素的x和y坐标，我会将其保存在服务器上的某个位置，以备以后使用

---

3.对于x、y坐标值，在图像上应用或不应用缩放时，如何定位同一图像上的像素位置？

这里仅介绍您的主要挑战。您要做的是绘制画布，然后移动和缩放，以便放大适当的区域

首先，您需要进行转换： 将此应用为：

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

然后需要修改变换：

这是一个有用的链接：

 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