Question

JCrop它是一个非常好的插件，但遗憾的是缺少放大缩小功能。

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

请发布代码示例。

由于

Answer 1

这是一种非常快速和肮脏的方式...... 在Jcrop提供的名为“crop.php”的演示文件中，您将找到此功能：

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

删除上面的整个功能并将其替换为：

$(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
      });
   });

});

然后在身体的某处添加：

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

jQuery如何添加到Jcrop缩放功能

2 个答案: