使用jquery cropit插件进行图片剪切前端方案

 

目录

 

前言

官网

css代码

html代码

js代码

遇到的坑

---

前言

jquery cropit插件可以方便的剪切图片，还可以缩放，旋转，把剪切到的图片（base64编码字符串）上传到服务器。

在用户头像编辑上传中可以提供一个可行方案。

效果图：

官网

http://scottcheng.github.io/cropit/

css代码

<style>
.cropit-preview {
	background-color: #f8f8f8;
	background-size: cover;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-top: 7px;
	background-size: cover;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-top: 7px;
	width: 145px;		/*剪切后得到的图片的宽度*/
	height: 170px;		/*剪切后得到的图片的高度*/
}

}
.cropit-preview-image-container {
	cursor: move;
}

.image-size-label {
	margin-top: 10px;
}

input, .export {
	display: block;
}

button {
	margin-top: 10px;
}

.cropit-image-zoom-input {
	margin-top: 0px;
	width: 0px;
}

/**
这里一定要设置为none，官网的例子没有告诉你这点，
为什么要设置，因为可能引入的文件中设置了其他值
导致剪切预览图片很奇怪，预览中你看到的和你实际剪切的完全不一致
*/
img {
	max-width: none;
}
</style>

html代码

<!-- 模态框（Modal） -->
	<div class="modal fade" id="selectPicBox" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 300px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">编辑头像</h4>
				</div>
				<div class="modal-body">
					<!-- /header -->
					<div class="image-editor">
						<input type="file" class="cropit-image-input">
						<div class="cropit-preview"></div>
						<div class="image-size-label">缩放图片</div>
						<input type="range" class="cropit-image-zoom-input">

					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="sendPicBtn" type="button" class="btn btn-primary">提交更改</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>

js代码

/// 上传头像
$(function() {
	$('.image-editor').cropit();

	$('#sendPicBtn').click(function() {
        // imageData 是base64编码的字符串
		var imageData = $('.image-editor').cropit('export');
		sendPic(imageData);
	});
});

遇到的坑

1、html代码不能当道vue里面

2、img的max-width要设置为none