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

これは便利なリンクです: canvas.scale 関数を使用してキャンバスを拡大しますか?

于 2013-04-03T14:54:28.417 に答える