jQuery画像をトリミングし、ライブプレビューを表示

Question

Ok imはjQuery imgareaselectプラグインを使用して、オーバーレイのx座標とy座標をマッピングするオーバーレイを表示します。これらの値を使用して、イメージのコピーをユーザーに表示してみたいと思います。

私は、画像を表示するHTMLとCSSを構造化する最良の方法を見つける必要があると思います。

感謝任意のアイデア：）

Answer 1

は、DIV（または任意の要素）の背景として画像を配置した後、作成するDIVの幅と高さと関連して、背景画像上のxおよびy位置を使用することができ切り取られた画像の枠付きのプレビュー実際のトリミングされたファイルは、適切なイメージライブラリを使用してサーバー上に生成する必要があります。

あなたの例を使用して、そのようimgAreaSelect()のonSelectEndハンドラを更新することができます：背景画像のx座標の値がselection.x1のマイナスであることを

$('#ladybug').imgAreaSelect({ 
    onSelectEnd: function (img, selection) { 
     var div = $('.imgwrapper2'); 

     //image 
     div.css('background-image', 'url(' + img.src + ')'); 

     //width 
     div.css('width', selection.x2 - selection.x1); 

     //height 
     div.css('height', selection.y2 - selection.y1); 

     //x offset 
     div.css('background-position-x', -selection.x1); 

     //y offset 
     div.css('background-position-y', selection.y2); 
    } 
}); 

注意。

Answer 2

操作が最小限のパフォーマンスでそれをしないのJavaScriptサーバで実行する必要があります。しかし、あなたは本物の作物

1. 場所
2. はこのdiv要素の背景に自分の画像を設定croped面積の大きさを持つdiv要素の簡単なプレビューを表示することができます。
3. 背景マージン（左と上）を作物のxとyのバールに設定します。グスタボの答えと同様