jqueryを使用した画像のクロッピング

ユーザーに画像をアップロードさせてから、設定されたサイズにトリミングすることを検討しています。私がやりたいことは、基本的に特定の作物の大きさに設定されたdivと、そのボックス内のイメージです。ユーザーは画像をスライドさせることができ、そのdiv内で見えるものは画像が切り取られることになります。jqueryを使用した画像のクロッピング

私が出会ったすべてのjqueryプラグインは、ユーザーが選択ボックスを完全なイメージの周りに移動させ、選択ボックスの後ろにイメージを移動させないようにしました。この種のことが存在し、私はそのプラグインを見逃してしまったのでしょうか？

基本的には、Facebookのサムネイルエディタのようになり、サムネイルサイズのボックス内で画像をドラッグすることができます。

出典

2012-04-22 nbu

本当にプラグインは必要ありません。これは、バックグラウンド位置の値を設定することで、vanilla jQueryとCSSで行うことができます。

<div id="CroppedImageDiv"></div> 
<script type="text/javascript"> 
    function cropImage(imgUrl, cropWidth, cropHeight, cropStartX, cropStartY) { 
     var bgPos = cropStartX + "px " + cropStartY + "px"; 
     $('#CroppedImageDiv').width(cropWidth).height(cropheight).css('background-position', bgPos); 
     $('#CroppedImageDiv').css('background-url', imgUrl); 
    } 
</script>

出典

2012-04-22 02:45:54

これは正しい、しかし、私に画像をaroungドラッグする機能を与えることはありませんか？これは最終的なイメージ作物を決定することに過ぎないのですか？申し訳ありません、私はjavascript/jqueryの初心者です。 – nbu

はい、このコードは、最終的に切り取った画像をDIVに表示します。実際のクロッピングアクションについては、JCropのコードを参考にしてみてください。しかし、jQueryの初心者にとっては難しいかもしれません... –