Получить X, Y Координаты масштабированных пикселей изображения - KineticJs/HTML5 Canvas Image

Question

Я разрабатываю приложение, которое позволяет пользователям загружать фотографии при загрузке фотографии, приложение выполняет обнаружение на сервере, чтобы получить интересующую область фотографии (x, y, width и height) и вернуть его клиенту (браузеру).

На стороне клиента пользователь должен настроить регион интереса, щелкнув по местам, воспринимаемым как края. См. Ниже изображение.

Мои основные проблемы являются:

(1) Как увеличить к точной интересующей области данного х, у, ширина и высота возвращается с сервера?

До сих пор это мое решение этой проблемы:

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?