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

		}

	});

});