cropper：图像裁剪上传

其他 2018-07-01 04:39:17 阅读次数: 0

最近项目需要上传用户图像，但是考虑到用户体验，需要提供用户裁剪功能，将裁剪好的图片上传服务器。

一开始百度裁剪图片插件，接触了jcrop，学习后发现它是提供图片的坐标、宽和高，然后去后台用java进行裁剪，

裁剪图片的效果并不怎么理想。后来换成cropper，该插件直接将裁剪好的图片转换成Base64上传，效果不错。


效果截图：

默认图像和选择文件按钮：



点击选择图片效果：



选中白衣服的柳岩：



点击确定按钮：




一：下载

cropper演示以及js、css文件下载地址：点击打开链接


二：导入js、css文件

<link rel="stylesheet" href="css/cropper.min.css" type="text/css" />

<script src="js/jquery.min.js"></script>
<script src="js/cropper.min.js"></script>

三：页面容器

<body>
	<div class="upload">
		<label title="上传图片" for="chooseImg" class="l-btn choose-btn">
			<input type="file" name="file" id="chooseImg" class="hidden"
			onchange="selectImg(this)"> 选择图片
		</label>
		<div class="str">
			<img id="finalImg" src="/demo/img/head.jpg" width="100%">
		</div>
	</div>

	<!--图片裁剪框 start-->
	<div style="display: none" class="tailoring-container">
		<div class="black-cloth" onclick="closeTailor(this)"></div>
		<div class="tailoring-content">
			<div class="tailoring-content-one">

				<div class="close-tailoring" onclick="closeTailor(this)">×</div>
			</div>

			<div class="tailoring-content-two">
				<div class="tailoring-box-parcel">
					<img id="tailoringImg">
				</div>
				<div class="preview-box-parcel">
					<p>图片预览：</p>
					<div class="square previewImg"></div>
					<!--  <div class="circular previewImg"></div>-->
				</div>
			</div>

			<div class="tailoring-content-three">
				<button class="l-btn cropper-reset-btn">复位</button>
				<button class="l-btn cropper-rotate-btn">旋转</button>
				<button class="l-btn cropper-scaleX-btn">换向</button>
				<button class="l-btn sureCut" id="sureCut">确定</button>
			</div>
		</div>
	</div>
</body>

四：定义页面样式

<style>
* {
	margin: 0;
	padding: 0;
}

.l-btn {
	display: inline-block;
	outline: none;
	resize: none;
	border: none;
	padding: 5px 10px;
	background: #8C85E6;
	color: #fff;
	border: solid 1px #8C85E6;
	border-radius: 3px;
	font-size: 14px;
}

.l-btn:hover {
	background: #8078e3;
	animation: anniu 1s infinite;
}

.l-btn:active {
	box-shadow: 0 2px 3px rgba(0, 0, 0, .2) inset;
}

.hidden {
	display: none;
}

.tailoring-container, .tailoring-container div, .tailoring-container p {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.tailoring-container {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1000;
	top: 0;
	left: 0;
}

.tailoring-container .black-cloth {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #111;
	opacity: .9;
	z-index: 1001;
}

.tailoring-container .tailoring-content {
	position: absolute;
	width: 768px;
	height: 560px;
	background: #fff;
	z-index: 1002;
	left: 0;
	top: 0;
	border-radius: 10px;
	box-shadow: 0 0 10px #000;
	padding: 10px;
}

.tailoring-content-one {
	height: 40px;
	width: 100%;
	border-bottom: 1px solid #DDD;
}

.tailoring-content .choose-btn {
	float: left;
}

.tailoring-content .close-tailoring {
	display: inline-block;
	height: 30px;
	width: 30px;
	border-radius: 100%;
	background: #eee;
	color: #fff;
	font-size: 22px;
	text-align: center;
	line-height: 30px;
	float: right;
	cursor: pointer;
}

.tailoring-content .close-tailoring:hover {
	background: #ccc;
}

.tailoring-content .tailoring-content-two {
	width: 100%;
	height: 460px;
	position: relative;
	padding: 5px 0;
}

.tailoring-content .tailoring-box-parcel {
	width: 520px;
	height: 450px;
	position: absolute;
	left: 0;
	border: solid 1px #ddd;
}

.tailoring-content .preview-box-parcel {
	display: inline-block;
	width: 228px;
	height: 450px;
	position: absolute;
	right: 0;
	padding: 4px 14px;
}

.preview-box-parcel p {
	color: #555;
}

.previewImg {
	width: 200px;
	height: 200px;
	overflow: hidden;
}

.preview-box-parcel .square {
	margin-top: 10px;
	border: solid 1px #ddd;
}

.preview-box-parcel .circular {
	border-radius: 100%;
	margin-top: 10px;
	border: solid 1px #ddd;
}

.tailoring-content .tailoring-content-three {
	width: 100%;
	height: 40px;
	border-top: 1px solid #DDD;
	padding-top: 10px;
}

.sureCut {
	float: right;
}

@media all and (max-width: 768px) {
	.tailoring-container .tailoring-content {
		width: 100%;
		min-width: 320px;
		height: 460px;
	}
	.tailoring-content .tailoring-content-two {
		height: 360px;
	}
	.tailoring-content .tailoring-box-parcel {
		height: 350px;
	}
	.tailoring-container .tailoring-box-parcel {
		width: 100%;
	}
	.tailoring-container .preview-box-parcel {
		display: none;
	}
}

.upload {
	position: fixed;
	right: 40rem;
	top: 10rem;
}

.str {
	width: 150px;
	height: 140px;
	border: solid 1px #e3e3e3;
	padding: 5px;
	margin-top: 10px
}

.tailoring-container {
	width: 800px;
	height: 800px;
}
</style>

五：js代码

<script type="text/javascript">
//弹出框水平垂直居中
(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)
			}
		});
	}
</script>


六：后台java代码

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需要导入依赖

<dependency>
	<groupId>commons-lang</groupId>
	<artifactId>commons-lang</artifactId>
	<version>2.6</version>
</dependency>






猜你喜欢

转载自blog.csdn.net/qq_37936542/article/details/80347631
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022