獲取縮放圖像像素的X，Y座標 - KineticJs/HTML5 Canvas圖像

我正在開發一個應用程序，允許用戶在照片上傳過程中上傳照片，應用程序在服務器上執行檢測以獲取照片的感興趣區域（x，y，寬度和高度），並將其返回給客戶端（瀏覽器）。獲取縮放圖像像素的X，Y座標 - KineticJs/HTML5 Canvas圖像

在客戶端，用戶需要通過點擊感知爲邊緣的位置來調整感興趣區域。見下圖。

Region of interest

我的主要挑戰是：

（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座標值，如何找到同一圖像上的像素位置（在圖像上應用或不應用比例尺）？

來源

2013-04-03 Syma

只是在這裏解決你的主要挑戰。你想要做的是繪製畫布，然後移動和縮放，以便放大適當的區域。

首先，你需要變換： 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-03 14:54:28 SoluableNonagon

獲取縮放圖像像素的X，Y座標 - KineticJs/HTML5 Canvas圖像

回答

相關問題