图片裁切插件jCrop的使用心得

Posted 2020-06-13

上一篇简单的介绍了一下开发的背景以及一些学习资料，下面开始介绍如何上手。

一、下载jCrop

http://deepliquid.com/content/Jcrop_Download.html

直接去官网下载就好了。

二、将插件部署到项目中。

一般引入这两个文件就可以了。

三、开始初始化插件。

最简单的初始化

$(document).ready(
function(){
 $("#xuwanting").Jcrop(); 
}
);

这块就要好好说说了，网上的demo大部分都是像这样直接对一个页面中

已经存在的图片进行初始化，但是项目中往往不是这样的，一般是需要用户先上传一个图片，然后再对这个图片进行裁切。

所以大概步骤如下：

1、用户上传图片（通过图片上传插件）。

2、服务器返回图片的服务器地址（url）。

3、将url赋值到img元素中让图片展示出来。

4、jCrop插件初始化。

5、用户裁切图片点击保存。

6、将保存后的图片裁切的参数传给后台。

7、后台通过这些参数来对图片进行裁切。

8、后台返回裁切好的图片url，可以用来展示。

那么大家看到这大概就发现了，其实真正意义上的图片裁切是通过后台来完成的，jCrop只是给我们返回了图片裁切的参数，后台根据这些参数来裁切图片。

所以，功能的实现是离不开后台同学的帮助的。

再下一篇里我将具体写明jcrop的初始化代码以及保存时怎么获取参数。