手机端图像编辑上传-cropper

编辑头像，实现相册，照像功能，并能缩放裁剪功能，可自定义UI，引用'cropper.js', 'exif.js'

/*初始化裁剪插件*/
var screenWidth = $(window).width();
var screenHeight = $(window).height();
var Cropper = window.Cropper;
var console = window.console || { log: function () {} };
var container = document.querySelector('.img-container');
var image = container.getElementsByTagName('img').item(0);
var actions = document.getElementById('actions');
var isUndefined = function (obj) {
return typeof obj === 'undefined';
};
var options = {
minContainerHeight : screenHeight,
minContainerWidth : screenWidth,
aspectRatio: 1 / 1,//裁剪框比例 1：1
viewMode : 1,//显示
guides :false,//裁剪框虚线 默认true有
dragMode : "move",
build: function (e) { //加载开始
//可以放你的过渡 效果
},
built: function (e) { //加载完成
$("#containerDiv").show();
$("#imgEdit").show();
},
zoom: function (e) {
console.log(e.type, e.detail.ratio);
},
background : true,// 容器是否显示网格背景
movable : true,//是否能移动图片
cropBoxMovable :true,//是否允许拖动裁剪框
cropBoxResizable :true,//是否允许拖动 改变裁剪框大小
};
var cropper = new Cropper(image, options);

/*选择图片*/
var inputImage = document.getElementById('inputImage');
var URL = window.URL || window.webkitURL;
var blobURL;
if (URL) {
inputImage.onchange = function () {
var files = this.files;
var file;
if (cropper && files && files.length) {
file = files[0];
if (/^image\/\w+/.test(file.type)) {
blobURL = URL.createObjectURL(file);
cropper.reset().replace(blobURL);
} else {
window.alert('Please choose an image file.');
}
}
$(inputImage).find("img").hide();
};
} else {
inputImage.disabled = true;
inputImage.parentNode.className += ' disabled';
}

/*按钮绑定事件*/
actions.querySelector('.docs-buttons').onclick = function (event) {
var e = event || window.event;
var target = e.target || e.srcElement;
var result;
var input;
var data;

if (!cropper) {
return;
}

while (target !== this) {
if (target.getAttribute('data-method')) {
break;
}
target = target.parentNode;
}

if (target === this || target.disabled || target.className.indexOf('disabled') > -1) {
return;
}

data = {
method: target.getAttribute('data-method'),
target: target.getAttribute('data-target'),
option: target.getAttribute('data-option'),
secondOption: target.getAttribute('data-second-option')
};

if (data.method) {
if (typeof data.target !== 'undefined') {
input = document.querySelector(data.target);

if (!target.hasAttribute('data-option') && data.target && input) {
try {
data.option = JSON.parse(input.value);
} catch (e) {
console.log(e.message);
}
}
}

if (data.method === 'getCroppedCanvas') {
data.option = JSON.parse(data.option);
}

result = cropper[data.method](data.option, data.secondOption);

switch (data.method) {
case 'scaleX':
case 'scaleY':
target.setAttribute('data-option', -data.option);
break;

case 'getCroppedCanvas':
if (result) {
fileImg = result.toDataURL('image/jpg');
$("#previewResult").attr("src", fileImg).show();
//$("#photoBtn").val("重新选择");
submitForm();
}

break;

case 'destroy':
$("#inputImage").val("");
$("#containerDiv").hide();
$("#imgEdit").hide();
break;
}

if (typeof result === 'object' && result !== cropper && input) {
try {
input.value = JSON.stringify(result);
} catch (e) {
console.log(e.message);
}
}
}
}


var fileImg = "";
$(function(){
$("#imgCutConfirm").bind("click",function(){
$("#containerDiv").hide();
$("#imgEdit").hide();
//$("#getCroppedCanvasModal").modal("hide");
})
});

//上传头像
function submitForm() {
$("#registerForm").attr("enctype","multipart/form-data");
var formData = new FormData($("#registerForm")[0]);
formData.append("photo", encodeURIComponent(fileImg));//
//formData.append("fileFileName","photo.jpg");
$.ajax({
url: "/my/upphoto",
type: 'POST',
data: formData,
timeout : 10000, //超时时间设置，单位毫秒
async: true,
cache: false,
contentType: false,
processData: false,
success: function (result) {
},
error: function (returndata) {
Alert.closedLoading();
}
});
}