jQuery如何添加到Jcrop缩放功能

Posted 2023-02-25

【中文标题】jQuery如何添加到Jcrop缩放功能

【英文标题】：jQuery how to add to Jcrop zoom feature

【发布时间】：2011-03-30 14:16:55

【问题描述】：

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

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

请发布代码示例。

谢谢

【问题讨论】：

您可能想试试Kroppr，它同时具有裁剪和缩放功能。

David（或任何人），当您说要添加：Scale X：Scale Y：Resize Image：在身体的某个地方，您的意思是什么？是body标签吗？您调用 Jcrop 的 img 标签？你能举个简单的例子吗？我是初学者，非常感谢您的帮助。谢谢！

【参考方案1】：

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

【讨论】：

感谢大卫对此的回答！

【参考方案2】：

这太棒了：

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