3

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

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

请发布代码示例。

谢谢

4

2 回答 2

7

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

$(函数(){
   $('#cropbox').Jcrop({
      纵横比：1，
      onSelect：更新坐标
   });
});

删除上面的整个函数并将其替换为：

$(函数(){

   var scalex = $('#scalex').val();
   var scaley = $('#scaley').val();
   var myJcrop = $.Jcrop('#cropbox', {
       纵横比：1，
       onSelect：更新坐标，
       boxWidth: scalex,
       boxHeight：鳞片状
   });

   $('#target').click(function() {
      myJcrop.destroy();
      scalex = $('#scalex').val();
      scaley = $('#scaley').val();
      myJcrop = $.Jcrop('#cropbox', {
          纵横比：1，
          onSelect：更新坐标，
          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>
于 2011-04-26T23:25:56.070 回答
1

这很棒：

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

于 2012-03-24T23:53:14.220 回答