专业编程基础技术教程

网站首页 > 基础教程 正文

前端开发:推举简单、功能强大的图像裁剪jQuery插件(cropper)

ccvgpt 2024-07-28 12:07:57 基础教程 9 ℃

cropper是一个简洁的jQuery图像裁剪插件,能够实现图片的裁剪、放大缩小、旋转等基本操作,使用简单,依赖jQuery1.9+开源库,开发团队更新也比较活跃。需要在项目中使用图像裁剪的可以试一下。

前端开发:推举简单、功能强大的图像裁剪jQuery插件(cropper)

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)设置默认属性配置。

Tags:

最近发表
标签列表