jQuery插件-Jcrop对图片的截取显示操作资源-CSDN文库

共17个文件

html：6个

jpg：3个

js：3个

Jcrop

jQuery插件

对图片的操作

图片的区域截取显示

5星 · 超过95%的资源需积分: 10 197 浏览量 2009-08-27 09:31:06 上传评论收藏 196KB RAR 举报

JQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。而Jcrop是基于jQuery的一个强大插件，专门用于实现网页上的图像裁剪功能。这个插件允许用户在浏览器端对图片进行选择和裁剪，提供了丰富的API和灵活的配置选项，适用于各种图片处理需求。 1. **Jcrop基本概念** Jcrop的核心功能是提供一个可交互的选区，用户可以通过鼠标或触控设备在图片上选择需要裁剪的区域。选区可以自由调整大小和形状，同时支持等比例缩放和固定宽高比。选区的变化会实时更新到预览框，使用户能直观看到裁剪后的效果。 2. **安装与引入** 使用Jcrop之前，首先需要在页面中引入jQuery库和Jcrop的CSS及JavaScript文件。你可以通过CDN或者本地文件引用。确保jQuery在Jcrop之前加载，因为Jcrop依赖于jQuery。 3. **初始化Jcrop** 在HTML中，你需要有一个`<img>`标签来展示图片，并为它添加一个ID以便于JavaScript访问。然后在脚本中，使用`$('#yourImageId').Jcrop()`来初始化Jcrop。这会将Jcrop的功能绑定到指定的图片元素上。 4. **配置选项** Jcrop有许多配置选项，可以自定义其行为。例如： - `setSelect`: 初始化时设置选区的坐标。 - `aspectRatio`: 设置裁剪区域的宽高比。 - `minSize`: 最小裁剪尺寸。 - `maxSize`: 最大裁剪尺寸。 - `trueSize`: 图片的真实尺寸，防止缩放比例错误。 5. **事件监听** Jcrop提供了多种事件，如`select`, `change`, `move`等，你可以监听这些事件来获取选区变化的信息。例如，`onSelect: function(coords) { ... }`会在选区改变时被触发，`coords`参数包含了当前选区的坐标。 6. **API调用** Jcrop还提供了一些API方法，用于控制选区和获取信息。例如： - `api.selection`: 获取当前选区对象。 - `api.getBounds()`: 获取图片的边界信息。 - `api.setSelect(coords)`: 设置新的选区坐标。 - `api.destroy()`: 移除Jcrop实例。 7. **图片上传与裁剪** 结合其他前端技术（如FormData和Ajax），Jcrop可以与后端服务器配合，实现在客户端选择并上传裁剪好的图片。用户选择图片后，Jcrop可以提供裁剪区域的坐标，这些信息可以发送到服务器，服务器再根据这些信息裁剪原始图片。 8. **自定义样式与界面** Jcrop的外观可以通过CSS进行定制，包括边框、背景色、提示文本等。同时，你可以通过自定义HTML模板来增强用户体验，比如添加裁剪比例选择器或预览窗口。 9. **兼容性与性能** Jcrop兼容主流的现代浏览器，包括Chrome、Firefox、Safari、Edge以及Internet Explorer 8+。然而，对于移动设备，需要注意触摸事件的处理和性能优化，以确保在触摸屏上的良好体验。 10. **应用场景** Jcrop适用于各种需要图像裁剪的场景，如头像上传、产品图片编辑、在线设计工具等。结合其他前端框架（如Bootstrap或Vue.js）和后端服务，可以构建出强大的图片处理功能。 Jcrop是一个强大且易用的jQuery插件，为网页图片裁剪提供了便捷的解决方案。通过灵活的配置和丰富的API，开发者可以轻松地集成图像裁剪功能到自己的项目中。

资源推荐

资源详情

资源评论

收起资源包目录

Jcrop.rar （17个子文件）

Jcrop

css

jquery.Jcrop.css 748B

Jcrop.gif 329B

demos

tutorial1.html 956B

tutorial5.html 5KB

tutorial3.html 2KB

demo_files

sagomod.png 77KB

sago.jpg 18KB

flowers.jpg 45KB

sagomod.jpg 16KB

demos.css 558B

tutorial4.html 2KB

tutorial2.html 2KB

crop.php 2KB

jquery.Jcrop.min.js 17KB

jquery.Jcrop.js 25KB

jquery.min.js 56KB

index.html 2KB

<?php /** * Jcrop image cropping plugin for jQuery * Example cropping script * @copyright 2008 Kelly Hallman * More info: http://deepliquid.com/content/Jcrop_Implementation_Theory.html */ if ($_SERVER['REQUEST_METHOD'] == 'POST') { $targ_w = $targ_h = 150; $jpeg_quality = 90; $src = 'demo_files/flowers.jpg'; $img_r = imagecreatefromjpeg($src); $dst_r = ImageCreateTrueColor( $targ_w, $targ_h ); imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'], $targ_w,$targ_h,$_POST['w'],$_POST['h']); header('Content-type: image/jpeg'); imagejpeg($dst_r,null,$jpeg_quality); exit; } // If not a POST request, display page below: ?><html> <head> <script src="../js/jquery.pack.js"></script> <script src="../js/jquery.Jcrop.pack.js"></script> <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" /> <link rel="stylesheet" href="demo_files/demos.css" type="text/css" /> <script language="Javascript"> $(function(){ $('#cropbox').Jcrop({ aspectRatio: 1, onSelect: updateCoords }); }); function updateCoords(c) { $('#x').val(c.x); $('#y').val(c.y); $('#w').val(c.w); $('#h').val(c.h); }; function checkCoords() { if (parseInt($('#w').val())) return true; alert('Please select a crop region then press submit.'); return false; }; </script> </head> <body> <div id="outer"> <div class="jcExample"> <div class="article"> <h1>Jcrop - Crop Behavior</h1>  <img src="demo_files/flowers.jpg" id="cropbox" />  <form action="crop.php" method="post" onsubmit="return checkCoords();"> <input type="hidden" id="x" name="x" /> <input type="hidden" id="y" name="y" /> <input type="hidden" id="w" name="w" /> <input type="hidden" id="h" name="h" /> <input type="submit" value="Crop Image" /> </form> <p> <b>An example server-side crop script.</b> Hidden form values are set when a selection is made. If you press the <i>Crop Image</i> button, the form will be submitted and a 150x150 thumbnail will be dumped to the browser. Try it! </p> <div id="dl_links"> <a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> | <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a> </div> </div> </div> </div> </body> </html>

评论收藏

内容反馈