1

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

4

1 回答 1

0

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

首先你需要转换： 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?

于 2013-04-03T14:54:28.417 回答