cropper是一个简洁的jQuery图像裁剪插件,能够实现图片的裁剪、放大缩小、旋转等基本操作,使用简单,依赖jQuery1.9+开源库,开发团队更新也比较活跃。需要在项目中使用图像裁剪的可以试一下。
cropper有以下几个特点
支持jQuery v1.9.1+
支持38个配置属性
支持27个方法
支持6个事件
支持移动端适应
支持缩放、旋转等
1、下载及初始化
https://github.com/fengyuanchen/cropper
下载cropper插件后放到项目任意位置,然后如下面代码所示在页面中引入jQuery、cropperjs、croppercss即可。
在页面中输入如下代码,定义一个图像区域。
在JavaScript脚本中运行如下代码即可初始化一个简单的图像裁剪。
npm安装命令:
npm install cropper
bower安装命令:
bower install cropper
2、一些功能展示
①拖拽图像
②裁剪图像
③左右旋转
④图像反转
⑤生成不同像素大小图像
官方网站:
http://fengyuanchen.github.io/cropper/
API文档手册:
https://github.com/fengyuanchen/cropper
这是一款开源插件,如果功能不够用可以自己修改源码,通过cropper就可以把处理后的图像,上传到服务器中,并且可以通过fn.cropper.setDefaults(options)设置默认属性配置。