jQuery如何为Jcrop添加缩放功能

Question

JCrop 这是一个非常棒的插件，但不幸的是缺乏放大缩小功能。

我想知道是否有人尝试过在 jCrop 中添加放大缩小功能。

请发布代码示例。

谢谢

Answer 1

这是一种非常快速且肮脏的方法...... 在 Jcrop 提供的名为“crop.php”的演示文件中，您将找到此函数:

$(function(){
   $('#cropbox').Jcrop({
      aspectRatio: 1,
      onSelect: updateCoords
   });
});

Delete the entire function above and replace it with this:

$(function(){

   var scalex = $('#scalex').val();
   var scaley = $('#scaley').val();
   var myJcrop = $.Jcrop('#cropbox', {
       aspectRatio: 1,
       onSelect: updateCoords,
       boxWidth: scalex, 
       boxHeight: scaley
   });

   $('#target').click(function() {
      myJcrop.destroy();
      scalex = $('#scalex').val();
      scaley = $('#scaley').val();
      myJcrop = $.Jcrop('#cropbox', {
          aspectRatio: 1,
          onSelect: updateCoords,
          boxWidth: scalex, 
          boxHeight: scaley
      });
   });

});

Then add this somewhere in the body:

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>