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

Question

我正在开发一个允许用户上传照片的应用程序，在上传照片期间，应用程序在服务器上执行检测以获取照片的感兴趣区域（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坐标值，如何在同一图像上找到像素位置（图像上是否有比例）？

Answer 1

在这里解决您的主要挑战。你想要做的是绘制画布，然后移动和缩放，以便放大适当的区域。

首先你需要变换： http://kineticjs.com/docs/symbols/Kinetic.Node.php#getTransform
将其应用为：

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

然后你需要修改变换： 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

这是一个有用的链接：Zoom in a canvas using canvas.scale function?