かなり単純な Javascript (jQuery) 画像クロッパーとリサイズをコーディングしています。基本的に、今のところ、必要な機能は実際にはcropとresizeだけです。
JCrop などのいくつかの jQuery プラグインをチェックしてきましたが、両方を同時に実行するプラグインはないようです。クロッパーやリサイザーがたくさんありますが、同じ「自然な」画像ビューで同時に2つの機能を使用することはできません。当然のことながら、このような例 (右下) は、ユーザーにとって視覚的にあまり良くありません。
http://jsfiddle.net/opherv/74Jep/33/
私はこれが2つの機能を同時に持つための可能な方法だと思います. この例は現在ズームしすぎていることがわかりますが、作者自身が 「醜いハック」を使用していると認定されています。
function changeZoom(percent){
var minWidth=viewport.width();
var newWidth= (orgWidth-minWidth)*percent/100+minWidth;
var newHeight= newWidth/orgRatio;
var oldSize=[img.width(),img.height()];
img.css({ width: newWidth+"px", height: newHeight+"px" });
adjustDimensions();
//ugly hack :(
if (img.offset().left+img.width()>dragcontainer.offset().left+dragcontainer.width()){
img.css({ left: dragcontainer.width()-img.width() +"px" });
}
if (img.offset().top+img.height()>dragcontainer.offset().top+dragcontainer.height()){
img.css({ top: dragcontainer.height()-img.height() +"px" });
}
}
クロッパー フレーム/ゾーン (Web で最も頻繁に見られるように) + 画像のズーム/ズーム解除オプション (たとえば、画像の境界のハンドル) を使用する可能性を探しています。
これらの 2 つの機能のみが必要なので、これを最初からコーディングするか、他の JavaScript ファイル/プラグインを追加したくないと考えていましたが、必要のない他の機能が詰め込まれているため (少なくとも今のところ) .
問題は、単純なハンドルによってサイズ変更可能で、フレーム/ゾーンの選択によってトリミング可能な画像の表示をコーディングしようとする際に、特定の困難があるかどうかです (ユーザーが彼が望む画像のどの部分を微調整しますか）？
2 つの機能を分離した方がよいのでしょうか?
どうもありがとうございました。