上一篇简单的介绍了一下开发的背景以及一些学习资料,下面开始介绍如何上手。
一、下载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的初始化代码以及保存时怎么获取参数。
时间: 2024-10-12 20:56:14