获取缩放图像像素的 X,Y 坐标 - KineticJs / HTML5 Canvas Image答案

【问题标题】：Get X,Y Coordinate of Zoomed Image Pixels - KineticJs / HTML5 Canvas Image获取缩放图像像素的 X,Y 坐标 - KineticJs / HTML5 Canvas Image
【发布时间】：2013-04-03 14:37:23
【问题描述】：

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

【问题讨论】：

标签： html html5-canvas kineticjs pixel-manipulation

【解决方案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?

【讨论】：