# jfinal-cropper

**Repository Path**: jmult/jfinal-cropper

## Basic Information

- **Project Name**: jfinal-cropper
- **Description**: 基于 Cropper.js 和 JFinal 的图片裁剪上传Demo 适用于头像设置、文章封面、电商等多方面的场景应用
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: http://crop.jmult.com/
- **GVP Project**: No

## Statistics

- **Stars**: 8
- **Forks**: 4
- **Created**: 2019-03-22
- **Last Updated**: 2022-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### 介绍
基于 Cropper.js 和 JFinal 的图片裁剪上传Demo  
适用于头像设置、文章封面、电商等多方面的场景应用  
实现了常见图片的旋转、剪切和上传

#### 在线预览
[【点我查看 http://crop.jmult.com/】](http://crop.jmult.com/)

#### 使用技术
1. [JFinal 3.7 【点我去瞅瞅】](http://www.jfinal.com)  
2. JFinal-Undertow 1.6  
3. Bootstrap 4.0  
4. JQuery  
5. [Cropper 【点我去瞅瞅】](https://github.com/fengyuanchen/cropperjs)  

#### 使用说明

gif相关功能，依赖 [gif4j_pro_trial_2.3 去下载](https://download.csdn.net/download/wangquan1632008/11049486)，可能涉及版权问题，就不放这儿了   
1. 使用Maven导入本地仓库（没试过，不行别找我~~~）
```
mvn install:install-file -Dfile=D:\gif4j_pro_trial-2.3.jar  -DgroupId=spilot.tools.gif4j_pro_trial -DartifactId=gif4j_pro_trial -Dversion=2.3 -Dpackaging=jar
```

2. 使用本地引入项目
```
<dependency> 
	<groupId>com.gif4j</groupId> 
	<artifactId>gif4j_pro_trial</artifactId> 
	<version>2.3</version> 
	<scope>system</scope> 
	<systemPath>${basedir}/src/main/webapp/lib/gif4j_pro_trial_2.3.jar</systemPath>
</dependency>
```
3. 使用Maven打包时，注意把本地jar包打进去
```
<!-- 项目lib下面的依赖文件 copy 到 lib 目录下 -->
<fileSet>
	<directory>${basedir}/src/main/webapp/lib</directory>
	<outputDirectory>lib</outputDirectory>
</fileSet>
```

#### 两张效果图
图片裁剪：  
![图片裁剪](https://images.gitee.com/uploads/images/2019/0322/150046_dd07fb5e_3046519.png "1.png")  

裁剪记录（此处的分页使用 [JFinal-Enjoy](https://www.jfinal.com/doc/6-1) 开发，值得学习一下 ^_^）：  
![载剪结果列表](https://images.gitee.com/uploads/images/2019/0322/150108_4eeb6541_3046519.png "2.png")

#### 分页效果
1. 少量页数展示  
<div align=center>
    <img src="https://images.gitee.com/uploads/images/2019/0322/224437_359e4249_3046519.png"/>
</div>  

2. 多页展示  
<div align=center>
<img src="https://images.gitee.com/uploads/images/2019/0322/224501_97d0d7d4_3046519.png"/>

当前页在前
</div>  
<div align=center>
<img src="https://images.gitee.com/uploads/images/2019/0322/224523_86f4af61_3046519.png"/>

当前页在中间
</div>  
<div align=center>
<img src="https://images.gitee.com/uploads/images/2019/0322/224540_de6017c7_3046519.png"/>

当前页在后面
</div>