笔记本电脑或是台式机
互联网
谷歌浏览器等主流浏览器
Jcrop
访问 jQuery 图像裁剪插件 Jcrop官方网站，如下图所示。
点击【Download Jcrop】按钮，进入下载页面，选择下载最新的版本，如下图所示。
解压文件夹，工程目录，如下图所示。
使用方法如下所示：（1）载入 CSS 文件（2）载入 JavaScript 文件 （3）给 IMG 标签加上 ID
（4）调用 Jcrop$('#element_id').Jcrop();
Jcrop API接口，如下图所示。
新建HTML文件
All Jcrop Demos
Jcrop 的默认效果，如下图所示。
Aspect Ratio with Preview Pane 按高宽比例预览裁剪效果模拟实时预览裁剪效果的示例很直观的例子，使用 Jcrop 的 onChange 事件，实时更新裁剪后的图像预览。这种形式适合用于创建略缩图或头像。
Non-image Cropping 非图片裁剪在以外的元素上使用 Jcrop。因此你可以在canvas或者div元素上使用。
Basic Handler 事件处理下面展示一个基本事件处理的示例，这个示例里，我们使用 Jcrop 的 onChange 事件，实时更新在图像上裁剪的一些数值，这些数值可提供给服务端程序（例如：PHP）进行真实的裁剪。
Animation / Transitions 动画/过度效果演示使用 animateTo API 和 过渡背景颜色、透明度选项。颜色过渡需要 jQuery Color Animations 插件的支持，否则颜色不会有过渡效果。这个演示还需要使用 outerImage 选项定义另外的图像。
API 示例，如下图所示。
通过点击按钮，实时更改 Jcrop 的样式，如下图所示。
PHP 裁剪示例一个服务端程序裁剪的示例裁剪的一些相关数值存放在 hidden 的文本框中，如果你点击 裁剪图像 按钮，将裁剪出一张 150x150 的图像，并由浏览器输出。赶紧试试吧！注：如果你需要将裁剪后的图像保存到服务端的某个文件夹里，更改一下 PHP 的一些代码即可。
该插件依赖于JQuery，所以务必引入相关JQuery库，
注：如果你需要将裁剪后的图像保存到服务端的某个文件夹里，更改一下 PHP 的一些代码即可。