var maxWidth = 650, maxHeight=700, transformRatio=1;
var cropImg = $('#corp-img');
var cropCanvas = $('#crop-canvas');
var cropDiv = $('#corp-div');
var resizePoint = $('#resize-point');
var imageCropper = $('#image-cropper');
var imageArea = $('#image-area');
$('.petInfoInput-page .pet-Img').on('click', function(ev){
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; //返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
//显示裁剪浮层
imageCropper.css('display','block');
//显示loading
util.loading();
wx.uploadImage({
localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 0, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
util.ajaxData('/json/SAAS_H5_GetImageToWx', {type:2, mediaId:serverId}).done(function(data){ //1是个人，2是宠物
var corpimg = document.getElementById('corp-img');
corpimg.src = 'data:image/jpg;base64,' + data.body["img"].trim();
alert(corpimg.src);
corpimg.onload = function(){
util.loading(true);
var imgNw = cropImg[0].naturalWidth;
var imgNh = cropImg[0].naturalHeight;
if(imgNh>maxHeight || imgNw>maxWidth){ //图片被压缩了
if(imgNw>imgNh){
transformRatio = imgNw / maxWidth;
cropDiv.css({'width':imgNh/transformRatio, 'height':imgNh/transformRatio});
} else { //img压缩高度宽度不会被改变，需要自己调整
transformRatio = imgNh / maxHeight;
cropImg.css('width', imgNw/transformRatio);
cropDiv.css({'width':imgNw/transformRatio, 'height':imgNw/transformRatio});
}
} else { //需要拉伸图片
if(imgNw>imgNh){
transformRatio = imgNw/maxWidth;
cropImg.css({
'width': maxWidth,
'height': imgNh/transformRatio
});
cropDiv.css({'width':maxHeight, 'height':maxHeight});
} else {
transformRatio = imgNh/maxHeight;
cropImg.css({
'width': maxWidth/transformRatio,
'height': maxHeight
});
cropDiv.css({'width':maxHeight, 'height':maxHeight});
}
}
};
}).fail(function(){
util.toster('图片上传失败');
});
}
});
}
});
ev.stopImmediatePropagation();
ev.preventDefault();
});
var oImageArea = document.getElementById('image-area');
oImageArea.addEventListener('click', function(e){
var deltax = e.pageX - (360-imageArea.width()/2) - cropDiv.width()/2;
var deltay = e.pageY - cropDiv.height()/2;
cropDiv.css({
'left': deltax,
'top': deltay
});
e.stopImmediatePropagation();
e.preventDefault();
});
var sx,sy,nowleft,nowtop, oCropDiv=document.getElementById('corp-div');
oCropDiv.addEventListener('touchstart', function(e){
sx = e.changedTouches[0].pageX;
sy = e.changedTouches[0].pageY;
nowleft = parseFloat($(this).css('left').slice(0,-2));
nowtop = parseFloat($(this).css('top').slice(0,-2));
});
oCropDiv.addEventListener('touchmove', function(e){
var deltax = e.changedTouches[0].pageX - sx;
var deltay = e.changedTouches[0].pageY - sy;
// console.log(deltax + ' ' + deltay);
$(this).css({
'left': nowleft + deltax,
'top': nowtop + deltay
});
});
oCropDiv.addEventListener('touchend', function(e){
sx = e.changedTouches[0].pageX;
sy = e.changedTouches[0].pageY;
//检测边界问题
self.checkBound(cropDiv, imageArea, 1);
});
var px,py,nowwidth,nowheight, oResizePoint=document.getElementById('resize-point');
oResizePoint.addEventListener('touchstart', function(e){
px = e.changedTouches[0].pageX;
py = e.changedTouches[0].pageY;
nowwidth = $(cropDiv).width();
nowheight = $(cropDiv).height();
e.stopImmediatePropagation();
e.preventDefault();
});
oResizePoint.addEventListener('touchmove', function(e){
var deltax = e.changedTouches[0].pageX - px;
var deltay = e.changedTouches[0].pageY - py;
$(cropDiv).css({
'width': nowwidth + deltax,
'height': nowheight + deltay
});
e.stopImmediatePropagation();
e.preventDefault();
});
oResizePoint.addEventListener('touchend', function(e){
px = e.changedTouches[0].pageX;
py = e.changedTouches[0].pageY;
//检测边界问题
self.checkBound(cropDiv, imageArea, 2);
e.stopImmediatePropagation();
e.preventDefault();
});
// var canvas = document.getElementById('crop-canvas');
// var ctx = canvas.getContext('2d');
$('#cropper-sure').on('click', function(e){
util.loading(false);
//需要乘上devicePixelRatio，canvas坐标使用的是物理像素 * devicePixelRatio
var x = transformRatio * parseFloat($(cropDiv).css('left').slice(0,-2));
var y = transformRatio * parseFloat($(cropDiv).css('top').slice(0,-2));
var wid = transformRatio * $(cropDiv).width();
var hei = transformRatio * $(cropDiv).height();
// cropCanvas.attr({"width":wid, "height":hei});
var cropCan = document.getElementById("crop-canvas");
var cropImage = document.getElementById("corp-img");
cropImage.crossOrigin = "Anonymous";
cropCan.width = wid;
cropCan.height = hei;
var ctx = cropCan.getContext('2d');
ctx.drawImage(cropImage, x, y, wid, hei, 0, 0, wid, hei);
var data = cropCan.toDataURL();
alert("imgdata" + data);
$.ajax({
type: 'post',
url: '/imageupload',
data:{type:'petimg', base64:data},
dataType: 'json',
success: function(res){
if(res && res.code == 0){
util.toster('保存成功');
$('.petImg-show').attr('src', data); //设置显示
$('#image-cropper').css('display', 'none');
$('.petImg-show').attr('data-id', res.imageId);
self.checkChange(1);
} else {
util.toster('保存失败');
}
},
error: function(){
util.toster('保存失败');
},
complete: function(){
util.loading(true);
}
})
});
$('#cropper-cancel').on('click', function(){
setTimeout(function(){
$('#image-cropper').css('display', 'none');
}, 500);
});