图片剪裁上传插件 - 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);
		}
	});
});