图片剪裁上传插件 - cropper

图片剪裁上传插件 - cropper

<style>
	.photo-container{float: left;width: 300px;height: 300px;}
	.photo-container { padding-left: 10px; box-sizing: border-box; }
	.photo-container li{line-height: 20px;}
	.photo-container .photo-preview{margin-top: 10px;overflow: hidden;}
	.photo-container .photo-preview.col-1{width: 50px; height: 50px;}
	.photo-container .photo-preview.col-2{width: 100px; height: 100px;}
</style>
<section>
	<div>
		<input type="hidden" name="headphoto" id="headphoto" value="" />
		<input type="file" name="uploadFile" id="uploadFile" data-width="100" data-height="100"  accept="image/*"/>
	</div>
	<div class="clearfix">
		<!--<p class="l-info">插件地址http://fengyuanchen.github.io/cropper</p>-->
		<div class="photo-container">
			<img id="headerPhoto" src="images/default-header.jpg" />
		</div>
		<ul class="photo-container">
			<li class="photo-preview col-2"></li>
			<li class="photo-preview col-1"></li>
		</ul>
	</div>
</section>

/*
 * 头像剪辑插件初始化
 */
var $image = $('#headerPhoto');
var $previews = $('.photo-container .photo-preview');
var $cut = $('#cut');
var URL = window.URL || window.webkitURL;
var blobURL;
//cropper参数信息：https://github.com/fengyuanchen/cropper/blob/v2.1.0/README.md
var option = {
	preview: '.photo-preview', //显示预览图片的元素
	viewMode: 1, //设置剪裁框的视图模式（0-只在容器内，默认；1-在canvas内；2-容器不在canvas内；3-容器在canvas内）
	dragMode: 'move', //设置拖拽模式（crop-创建一个新的剪裁框，默认；move-移动canvas；none-什么都不做）
	aspectRatio: 1 / 1, ///*剪裁框比例*/
	autoCropArea: 1, //初始剪裁框区域比例0~1
	//guides: false, //是否显示剪裁框的虚线，突出裁剪框
	//highlight: false, //是否有遮罩的半透明效果
	//cropBoxMovable: false, //剪裁框是否可以移动
	//cropBoxResizable: false, //是否可以自定义剪裁框的大小 
	built: function() {},
	crop: function(e) {
		//设置预览图的大小
		/*var imageData = $(this).cropper('getImageData');
		var previewAspectRatio = e.width / e.height;//图片宽高比例
		$previews.each(function() {
			var $preview = $(this);
			var previewWidth = $preview.width();
			var previewHeight = previewWidth / previewAspectRatio;//通过宽度和宽高比例获得高
			var imageScaledRatio = e.width / previewWidth;
			$preview.height(previewHeight).find('img').css({
				width: imageData.naturalWidth / imageScaledRatio,
				height: imageData.naturalHeight / imageScaledRatio,
				marginLeft: -e.x / imageScaledRatio,
				marginTop: -e.y / imageScaledRatio
			});
		});*/
	}
};
$image.cropper(option); //初始化cropper

/*
 * 选择头像
 */
$("input[type=file]").on('change', function() {
	$inputFileElm = $(this);
	img_class=$inputFileElm.attr('id');
	var f=this.files[0];
	var imgBase64="";
	/*if(f.size > 1024*300){
		alert("上传图片不要超过300KB");
		return;
	}*/
	option["aspectRatio"] = parseInt($inputFileElm.data("width")) / parseInt($inputFileElm.data("height"))
	$image.cropper('destroy').cropper(option);
	if (URL) {
		var file, files = this.files;//获取file对象
		if (!$image.data('cropper')) return;
		if (files && files.length) {
			file = files[0];
			fileName=file.name;
			if (/^image\/\w+$/.test(file.type)) { //判断是否是图片格式的文件
				blobURL = URL.createObjectURL(file); //转换图片地址
				$image.one('built.cropper', function() {
					URL.revokeObjectURL(blobURL);
				}).cropper('reset').cropper('replace', blobURL); //设置上传的图片
			} else {
				alert('请选择图片!');
			}
		}
		$inputFileElm.val("");
	}
});

/*
 * 保存头像
 */
$('.btn-group').on('click','.save',function(){
	var imgBase64 = $image.cropper('getCroppedCanvas').toDataURL();//获取剪裁后的图片base64
  	console.log('[LEO]图片Base64 => ',imgBase64);
	$.ajax({
		type:"post",
		url:"",
		data:{
			photo:imgBase64
		},
		async:true,
		success:function(res){
			if(res == 'ok'){
  				alert('上传成功');
			}else{
  				alert('上传失败')；
			}
		},
		error:function(e){
			console.log('[LEO]出错了 => ',e);
		}
	});
});