项目中要求图片上传并裁剪的功能，之前也有接触过很多图片裁剪插件，效果体验不是很好，今天推荐一款好用的插件-cropper，超级好用，裁剪功能丰富，满足了各种需求。

功能：

1：点击选择图片，弹出文件夹选择桌面 文件

2：选择文件之后，打开编辑图片的页面，开始裁剪图片

插件下载地址：http://www.jq22.com/jquery-info18167

插件描述：croppic图像裁剪将满足您的需求，图像加载效果、展现效果以及裁剪都非常棒，相信看到Demo后一定会喜欢上此插件.

图片.png

图片.png

代码：

1：引入相关的css和js文件,cropper.min.css，ImgCropping.css，cropper.min.js等，文件下载地址：http://www.jq22.com/jquery-info18167

2：具体代码如下：前端部分

基于cropper.js的图片裁剪

.str {

width: 150px;

height: 200px;

border: solid 1px #e3e3e3;

padding: 5px;

margin-top: 10px

}

选择图片

//弹出框水平垂直居中

(window.onresize = function() {

var win_height = $(window).height();

var win_width = $(window).width();

if (win_width <= 768) {

$(".tailoring-content").css(

{

"top" : (win_height - $(".tailoring-content")

.outerHeight()) / 2,

"left" : 0

});

} else {

$(".tailoring-content").css(

{

"top" : (win_height - $(".tailoring-content")

.outerHeight()) / 2,

"left" : (win_width - $(".tailoring-content")

.outerWidth()) / 2

});

}

})();

// 选择文件触发事件

function selectImg(file) {

//文件为空，返回

if (!file.files || !file.files[0]) {

return;

}

$(".tailoring-container").toggle();

var reader = new FileReader();

reader.onload = function(evt) {

var replaceSrc = evt.target.result;

// 更换cropper的图片

$('#tailoringImg').cropper('replace', replaceSrc, false);// 默认false，适应高度，不失真

}

reader.readAsDataURL(file.files[0]);

}

// cropper图片裁剪

$('#tailoringImg').cropper({

aspectRatio : 1 / 1,// 默认比例

preview : '.previewImg',// 预览视图

guides : false, // 裁剪框的虚线(九宫格)

autoCropArea : 0.5, // 0-1之间的数值，定义自动剪裁区域的大小，默认0.8

movable : false, // 是否允许移动图片

dragCrop : true, // 是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域

movable : true, // 是否允许移动剪裁框

resizable : true, // 是否允许改变裁剪框的大小

zoomable : false, // 是否允许缩放图片大小

mouseWheelZoom : false, // 是否允许通过鼠标滚轮来缩放图片

touchDragZoom : true, // 是否允许通过触摸移动来缩放图片

rotatable : true, // 是否允许旋转图片

crop : function(e) {

// 输出结果数据裁剪图像。

}

});

// 旋转

$(".cropper-rotate-btn").on("click", function() {

$('#tailoringImg').cropper("rotate", 45);

});

// 复位

$(".cropper-reset-btn").on("click", function() {

$('#tailoringImg').cropper("reset");

});

// 换向

var flagX = true;

$(".cropper-scaleX-btn").on("click", function() {

if (flagX) {

$('#tailoringImg').cropper("scaleX", -1);

flagX = false;

} else {

$('#tailoringImg').cropper("scaleX", 1);

flagX = true;

}

flagX != flagX;

});

// 确定按钮点击事件

$("#sureCut").on("click", function() {

if ($("#tailoringImg").attr("src") == null) {

return false;

} else {

var cas = $('#tailoringImg').cropper('getCroppedCanvas');// 获取被裁剪后的canvas

var base64 = cas.toDataURL('image/jpeg'); // 转换为base64

$("#finalImg").prop("src", base64);// 显示图片

uploadFile(encodeURIComponent(base64))//编码后上传服务器

closeTailor();// 关闭裁剪框

}

});

// 关闭裁剪框

function closeTailor() {

$(".tailoring-container").toggle();

}

//ajax请求上传

function uploadFile(file) {

$.ajax({

url : '/demo/upload.do',

type : 'POST',

data : "file=" + file,

async : true,

success : function(data) {

console.log(data)

}

});

}

3：后台Java代码：

利用cropper插件裁剪本地图片，接下来的问题就是将裁剪过后的base64图片上传至后台。

1：去掉base64编码的头部 如："data:image/jpeg;base64," 如果不去，转换的图片不可以查看

2：解码

3：在tomcat目录下创建picture文件夹保存图片

4：判断文件目录是否存在

5：根据系统的不同获取文件路径的分隔符

6：输出文件路径

package com.debo.cropper;

import java.io.FileOutputStream;

import java.text.SimpleDateFormat;

import java.util.Base64;

import java.util.Base64.Decoder;

import java.util.Date;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.lang.RandomStringUtils;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.ResponseBody;

@Controller

@RequestMapping("upload")

public class Cropper {

/**

* 注释的代码可以忽略

* @throws

*/

@RequestMapping(method = RequestMethod.POST)

@ResponseBody

public String cropper(@RequestParam("file") String file,

HttpServletRequest request) throws Exception {

Decoder decoder = Base64.getDecoder();

// 去掉base64编码的头部 如："data:image/jpeg;base64," 如果不去，转换的图片不可以查看

file = file.substring(23);

//解码

byte[] imgByte = decoder.decode(file);

/*//在tomcat目录下创建picture文件夹保存图片

String path = request.getSession().getServletContext()

.getRealPath("");

String contextPath = request.getContextPath();

path = path.replace(contextPath.substring(1), "") + "picture";

File dir = new File(path);

if (!dir.exists()) {// 判断文件目录是否存在

dir.mkdirs();

}

//因为windows和linux路径不同，window：D:\dir linux:opt/java

//System.getProperty("file.separator")能根据系统的不同获取文件路径的分隔符

String fileName = getFileName();

path = path + System.getProperty("file.separator") + fileName;

*/

try {

FileOutputStream out = new FileOutputStream("D:/1.jpg"); // 输出文件路径

out.write(imgByte);

out.close();

} catch (Exception e) {

e.printStackTrace();

}

return "success";

/*String url = request.getScheme() + "://" + request.getServerName()

+ ":" + request.getServerPort() + "/picture/" + fileName;

return url; */

}

/**

* 创建文件名称 内容：时间戳+随机数

*

* @param @return

* @throws

*/

private String getFileName() {

SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");

String timeStr = sdf.format(new Date());

String str = RandomStringUtils.random(5,

"abcdefghijklmnopqrstuvwxyz1234567890");

String name = timeStr + str + ".jpg";

return name;

}

}

RandomStringUtils需要导入依赖

commons-lang

commons-lang

2.6

90后前端妹子，爱编程，爱运营，爱折腾。

坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。