当前位置：文江博客话题详情

jQuery如何为Jcrop添加缩放功能

发布于 2024-10-28 06:16:32 字数 105 浏览 1 评论 0原文

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

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

请发布代码示例。

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北城孤痞 2024-11-04 06:16:32

这是一种非常快速且肮脏的方法......
在 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>

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

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>

回复收藏 0 原文