jquery - jQueryJcropズーム機能に追加する方法

Question

JCropは本当に素晴らしいプラグインですが、残念ながらズームインズームアウト機能がありません。

誰かがjCropにズームインズームアウト機能を追加しようとしたことがあるかどうか知りたいのですが。

コードの例を投稿してください。

ありがとう

Answer 1

これは非常に迅速で汚い方法です...「crop.php」と呼ばれるJcropで提供されるデモファイルには、次の関数があります。

$（function（）{
   $（'＃cropbox'）。Jcrop（{
      アスペクト比：1、
      onSelect：updateCoords
   }）;
}）;

上記の関数全体を削除し、次のように置き換えます。

$（function（）{

   var scalex = $（'＃scalex'）。val（）;
   var scaley = $（'＃scaley'）。val（）;
   var myJcrop = $ .Jcrop（'＃cropbox'、{
       アスペクト比：1、
       onSelect：updateCoords、
       boxWidth：scalex、
       boxHeight：スケーリー
   }）;

   $（'＃target'）。click（function（）{
      myJcrop.destroy（）;
      scalex = $（'＃scalex'）。val（）;
      scaley = $（'＃scaley'）。val（）;
      myJcrop = $ .Jcrop（'＃cropbox'、{
          アスペクト比：1、
          onSelect：updateCoords、
          boxWidth：scalex、
          boxHeight：スケーリー
      }）;
   }）;

}）;

次に、これを本文のどこかに追加します。

Scale X:<input type="text" id="scalex" value="150" style="width:50px;"></input>
Scale Y:<input type="text" id="scaley" value="140" style="width:50px;"></input>
<button id="target">Resize Image</button>

Answer 2

これは素晴らしい：

https://github.com/sheldon/jquery-cropzoom