图片剪裁上传插件

图片剪裁上传插件

图片剪裁上传插件 - 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);
}
});
});
05-04 09:18