jQuery如何添加到Jcrop缩放功能 [英] jQuery how to add to Jcrop zoom feature

问题描述

JCrop这是一个非常出色的插件，但不幸的是缺少Zoom-In Zoom-Out功能.

JCrop it is a really great plugin but unfortunately lack of Zoom-In Zoom-Out feature.

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

I would like to know if someone have ever tried to add a Zoom-In Zoom-Out feature in jCrop.

请发布代码示例.

谢谢

推荐答案

这是一种非常快捷，肮脏的方法... 在Jcrop随附的演示文件"crop.php"中，您将找到此功能:

This is a very quick and dirty way to do it... In the demo file provided with Jcrop called "crop.php" you'll find this function:

$(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>

这篇关于jQuery如何添加到Jcrop缩放功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！