|
|
@@ -5,11 +5,32 @@ var app = new Vue({
|
|
|
curNav: 'member',
|
|
|
// 用户信息
|
|
|
memberInfo: {},
|
|
|
+ // 裁剪参数
|
|
|
+ options: {},
|
|
|
+ cropParams: {},
|
|
|
+ // 文件
|
|
|
+ file: null,
|
|
|
+ // 上传弹窗
|
|
|
+ uploadBox: false,
|
|
|
+ submitting: {'sendcode': null, 'submit': null},
|
|
|
+ rebackurl: '',
|
|
|
+ cropData: {},
|
|
|
+ id: 0,
|
|
|
},
|
|
|
created: function () {
|
|
|
this.getInfo();
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 显示头像弹窗
|
|
|
+ showPop: function () {
|
|
|
+ if (this.uploadBox) {
|
|
|
+ this.uploadBox = false;
|
|
|
+ $("body").css('overflowY', 'auto');
|
|
|
+ } else {
|
|
|
+ this.uploadBox = true;
|
|
|
+ $("body").css('overflowY', 'hidden');
|
|
|
+ }
|
|
|
+ },
|
|
|
// 获取用户信息
|
|
|
getInfo: function () {
|
|
|
var _this = this;
|
|
|
@@ -39,5 +60,388 @@ var app = new Vue({
|
|
|
}
|
|
|
}, "json");
|
|
|
},
|
|
|
+ // 选择图片
|
|
|
+ selectImg: function (ele, previewId) {
|
|
|
+ var _this = this;
|
|
|
+ var selectFile = ele.target.files[0];
|
|
|
+ if (selectFile) {
|
|
|
+ var reader = new FileReader();
|
|
|
+ reader.readAsDataURL(selectFile);
|
|
|
+ reader.onloadend = function (even) {
|
|
|
+ _this.file = selectFile;
|
|
|
+ $('#preview_' + previewId).attr('src', even.currentTarget.result);
|
|
|
+ $('#preview_' + previewId).attr('old-src', even.currentTarget.result);
|
|
|
+ _this.picEdit(previewId);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ picEdit: function (id) {
|
|
|
+ var _this = this;
|
|
|
+ $.closePopup();
|
|
|
+ var src = $('#preview_' + id).attr('src');
|
|
|
+ if (src == '') {
|
|
|
+ $.toast('请重新选择图片');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ _this.showPop();
|
|
|
+ $("#cropPreview").hide();
|
|
|
+ $("#preview_box").show();
|
|
|
+ $(".fanhui2 .del").show();
|
|
|
+ $("body").css('overflowY', 'hidden');
|
|
|
+ $image = $('#preview_' + id);
|
|
|
+ $image.attr('src', src);
|
|
|
+ $image.attr('data-src', src);
|
|
|
+ var width = $("body").outerWidth() * 0.85;
|
|
|
+ var height = (425 / 343) * width;
|
|
|
+
|
|
|
+ var _image = new Image();
|
|
|
+ _image.src = src;
|
|
|
+ var iWidth = _image.width;
|
|
|
+ var iHeight = _image.height;
|
|
|
+ var rate = iWidth/iHeight;
|
|
|
+ $(".preview-box").css('width', width);
|
|
|
+ $(".preview-box").css('height', height);
|
|
|
+ $(".crop-preview .desc").css('width', width);
|
|
|
+ $("#cropBox").popup();
|
|
|
+ $.showLoading('图片加载中')
|
|
|
+ _this.options = {
|
|
|
+ aspectRatio: 0,
|
|
|
+ // center: true,
|
|
|
+ movable: true,
|
|
|
+ zoomable: true,
|
|
|
+ zoomOnTouch: true,
|
|
|
+ zoomOnWheel: false,
|
|
|
+ scalable: true,
|
|
|
+ wheelZoomRatio: 0.1,
|
|
|
+ background: false,
|
|
|
+ responsive: true,
|
|
|
+ guides: false,
|
|
|
+ strict: false,
|
|
|
+ width: width,
|
|
|
+ dragMode: 'move',
|
|
|
+ height: height,
|
|
|
+ autoCropArea: 1,
|
|
|
+ cropBoxMovable: false,
|
|
|
+ cropBoxResizable: false,
|
|
|
+ minContainerWidth: width,
|
|
|
+ minContainerHeight: height,
|
|
|
+ minCropBoxWidth: width,
|
|
|
+ maxCropBoxWidth: width,
|
|
|
+ minCropBoxHeight: height,
|
|
|
+ maxCropBoxHeight: height,
|
|
|
+ minCanvasWeight: width,
|
|
|
+ maxCanvasWeight: width,
|
|
|
+ minCanvasHeight: height,
|
|
|
+ maxCanvasHeight: height,
|
|
|
+ viewMode: 1,
|
|
|
+ ready: function () {
|
|
|
+ $.hideLoading();
|
|
|
+
|
|
|
+ },
|
|
|
+ crop: function (data) {
|
|
|
+ $.hideLoading();
|
|
|
+ _this.cropData = data
|
|
|
+
|
|
|
+ $(".cropper-container img").attr('id', 'cropimg');
|
|
|
+ $("#cropPreview").html('<div class="cropper-container" style="width: ' + width + 'px; height: ' + height + 'px;">' + $(".cropper-container").html() + '</div>');
|
|
|
+ $("#cropPreview .cropper-dashed").remove();
|
|
|
+ $("#cropPreview .cropper-dashed").remove();
|
|
|
+ $("#cropPreview .cropper-face").remove();
|
|
|
+ $("#cropPreview .cropper-line").remove();
|
|
|
+ $("#cropPreview .cropper-point").remove();
|
|
|
+ _this.cropParams = {
|
|
|
+ width: data.height,
|
|
|
+ height: data.width,
|
|
|
+ rotate: data.rotate,
|
|
|
+ imageSmoothingQuality: 'high',
|
|
|
+ fillColor: '#fff',
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (_this.jc != null) {
|
|
|
+ $image.cropper(_this.options);
|
|
|
+ $image.cropper('replace', src);
|
|
|
+ } else {
|
|
|
+ $image.cropper(_this.options);
|
|
|
+ _this.jc = $image.cropper('replace', src);
|
|
|
+ }
|
|
|
+
|
|
|
+ _image.onload = function(){
|
|
|
+ rate = 0;
|
|
|
+ iWidth = _image.width;
|
|
|
+ iHeight = _image.height;
|
|
|
+
|
|
|
+ if((iWidth<iHeight*0.65 || iHeight<=iWidth)){
|
|
|
+ if(iWidth/iHeight < width/height){
|
|
|
+ rate = parseFloat((width/height)/(iWidth/iHeight)).toFixed(2);
|
|
|
+ console.log('ss:'+rate)
|
|
|
+ }else{
|
|
|
+ rate = parseFloat((height/width)/(iHeight/iWidth)).toFixed(2);
|
|
|
+ }
|
|
|
+ rate = iWidth/iHeight>0.9 && iWidth/iHeight<1.1? 0.2 : rate;
|
|
|
+ if(rate<1 && iHeight<height){
|
|
|
+ rate = height/iHeight * 0.2;
|
|
|
+ }
|
|
|
+ if(rate<1 && iWidth<width){
|
|
|
+ rate = width/iWidth* 0.2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ setTimeout(function(){
|
|
|
+ if(rate>0){
|
|
|
+ console.log('放大：'+rate)
|
|
|
+ $image.cropper('zoom', rate);
|
|
|
+ }
|
|
|
+ var cropHeight = $(".cropper-view-box img").height();
|
|
|
+ var cropWidth = $(".cropper-view-box img").width();
|
|
|
+ var marginLeft = cropWidth>width? -(cropWidth-width)/2 : (width-cropWidth)/2;
|
|
|
+ var marginTop = cropHeight>height? -(cropHeight-height)/2 : (height-cropHeight)/2;
|
|
|
+ var mleft = parseFloat($(".cropper-view-box img").css('marginLeft').replace('px',''));
|
|
|
+ var mtop = parseFloat($(".cropper-view-box img").css('marginTop').replace('px',''));
|
|
|
+ //console.log(iWidth+'++'+iHeight+'++'+width+'++'+height+'++++'+cropWidth+'++'+cropHeight+'++'+rate+'++'+marginLeft+'++'+marginTop+'++'+mleft+'++'+mtop+'++'+(parseFloat(marginLeft)-parseFloat(mleft))+"++"+(parseFloat(marginTop)-parseFloat(mtop)))
|
|
|
+
|
|
|
+ $image.cropper('move', parseFloat(marginLeft)-parseFloat(mleft), parseFloat(marginTop)-parseFloat(mtop));
|
|
|
+
|
|
|
+ }, 50)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ zoom: function(id, size){
|
|
|
+ size = typeof(size) != 'undefined' && size >0? size : 1.75;
|
|
|
+ $image = $("#preview_" + id);
|
|
|
+ this.jc = $image.cropper('zoom', size);
|
|
|
+ },
|
|
|
+ // 取消
|
|
|
+ cropCancel: function () {
|
|
|
+ this.showPop();
|
|
|
+ $("#upload").val("");
|
|
|
+ $(".fanhui2 .del").hide();
|
|
|
+ $("body").css('overflowY', 'scroll');
|
|
|
+ $.closePopup();
|
|
|
+ },
|
|
|
+ // 重置
|
|
|
+ cropReset: function (id) {
|
|
|
+ $image = $("#preview_" + id);
|
|
|
+ var src = $image.attr('old-src');
|
|
|
+ $image.cropper(this.options);
|
|
|
+ this.jc = $image.cropper('replace', src);
|
|
|
+
|
|
|
+ var _image = new Image();
|
|
|
+ _image.src = src;
|
|
|
+ var iWidth = _image.width;
|
|
|
+ var iHeight = _image.height;
|
|
|
+ var width = $("body").outerWidth() * 0.9;
|
|
|
+ var height = (425 / 343) * width;
|
|
|
+ _image.onload = function(){
|
|
|
+ var rate = 0;
|
|
|
+ iWidth = _image.width;
|
|
|
+ iHeight = _image.height;
|
|
|
+ if((iWidth<iHeight*0.65 || iHeight<=iWidth)){
|
|
|
+ if(iWidth/iHeight < width/height){
|
|
|
+ rate = parseFloat((width/height)/(iWidth/iHeight)).toFixed(2);
|
|
|
+ console.log('ss:'+rate)
|
|
|
+ }else{
|
|
|
+ rate = parseFloat((height/width)/(iHeight/iWidth)).toFixed(2);
|
|
|
+ }
|
|
|
+ rate = iWidth/iHeight>0.9 && iWidth/iHeight<1.1? 0.2 : rate;
|
|
|
+ if(rate<1 && iHeight<height){
|
|
|
+ rate = height/iHeight * 0.2;
|
|
|
+ }
|
|
|
+ if(rate<1 && iWidth<width){
|
|
|
+ rate = width/iWidth* 0.2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ setTimeout(function(){
|
|
|
+ if(rate){
|
|
|
+ $image.cropper('zoom', rate);
|
|
|
+ }
|
|
|
+ var cropHeight = $(".cropper-view-box img").height();
|
|
|
+ var cropWidth = $(".cropper-view-box img").width();
|
|
|
+ var marginLeft = cropWidth>width? -(cropWidth-width)/2 : 0;
|
|
|
+ var marginTop = cropHeight>height? -(cropHeight-height)/2 : 0;
|
|
|
+ var mleft = parseFloat($(".cropper-view-box img").css('marginLeft').replace('px',''));
|
|
|
+ var mtop = parseFloat($(".cropper-view-box img").css('marginTop').replace('px',''));
|
|
|
+ $image.cropper('move', parseFloat(marginLeft)-parseFloat(mleft), parseFloat(marginTop)-parseFloat(mtop));
|
|
|
+ }, 50)
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ // 完成
|
|
|
+ cropConfirm: function (id) {
|
|
|
+ var _this = this;
|
|
|
+ if (this.jc != null) {
|
|
|
+ if (!_this.cropParams) {
|
|
|
+ $.toast('请先处理图片', 'text');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ $image = $("#preview_" + id);
|
|
|
+ $.showLoading('图片处理中...');
|
|
|
+ $("#cropPreview").show();
|
|
|
+ $("#preview_box").hide();
|
|
|
+ console.log(_this.cropData)
|
|
|
+ //alert(JSON.stringify(_this.cropData))
|
|
|
+ var cropSuccess = false;
|
|
|
+ var canvas = $image.cropper('getCroppedCanvas', _this.cropParams);
|
|
|
+ var url = canvas.toBlob(function (e) {
|
|
|
+ cropSuccess = true;
|
|
|
+ if (e != null) {
|
|
|
+ console.log("裁剪方式");
|
|
|
+ var timestamp = Date.parse(new Date());
|
|
|
+ e.name = timestamp + ".jpeg";
|
|
|
+ url = URL.createObjectURL(e);
|
|
|
+ _this.file = url;
|
|
|
+ _this.file = _this.dataURLtoFile(e, e.name);
|
|
|
+ $image.attr('data-src', url);
|
|
|
+ $("body").css('overflowY', 'scroll');
|
|
|
+ setTimeout(function () {
|
|
|
+ $.hideLoading();
|
|
|
+ $.closePopup();
|
|
|
+ $(".fanhui2 .del").hide();
|
|
|
+ $(id).cropper('destroy');
|
|
|
+ $('#' + id).attr('src', $image.attr('data-src'));
|
|
|
+ $("#upload").val("");
|
|
|
+ _this.postSubmit();
|
|
|
+ _this.jc = null;
|
|
|
+ }, 200);
|
|
|
+
|
|
|
+ } else {
|
|
|
+ console.log("合成方式");
|
|
|
+ var width = $("body").outerWidth() * 0.9;
|
|
|
+ var height = (425 / 343) * width;
|
|
|
+ var opts = {
|
|
|
+ width: width,
|
|
|
+ height: height,
|
|
|
+ scale: 5,
|
|
|
+ background: '#fff',
|
|
|
+ useCROS: true,
|
|
|
+ };
|
|
|
+ //console.log(opts);
|
|
|
+
|
|
|
+ var _image = document.getElementById('cropPreview');
|
|
|
+ //console.log($(".cropper-container")[0]);
|
|
|
+ html2canvas(_image, opts).then(function (canvas) {
|
|
|
+ const context = canvas.getContext('2d');
|
|
|
+ context.translate(0.5, 0.5);
|
|
|
+ context.mozImageSmoothingEnabled = false;
|
|
|
+ context.webkitImageSmoothingEnabled = false;
|
|
|
+ context.msImageSmoothingEnabled = false;
|
|
|
+ context.imageSmoothingEnabled = false;
|
|
|
+
|
|
|
+ var src = canvas.toDataURL('image/jpeg');
|
|
|
+ var timestamp = Date.parse(new Date());
|
|
|
+ var name = timestamp + ".jpeg";
|
|
|
+ _this.file = _this.dataURLtoFile1(src, name ? name : 'avatar.jpeg');
|
|
|
+ if (_this.file == null) {
|
|
|
+ $.showLoading('图片处理失败请重试');
|
|
|
+ setTimeout(function () {
|
|
|
+ $.closePopup();
|
|
|
+ $(".fanhui2 .del").hide();
|
|
|
+ $("#cropPreview").hide();
|
|
|
+ $("#preview_box").show();
|
|
|
+ $("#upload").val("");
|
|
|
+ }, 800);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ $image.attr('src', src);
|
|
|
+ $("body").css('overflowY', 'scroll');
|
|
|
+ setTimeout(function () {
|
|
|
+ $.hideLoading();
|
|
|
+ $.closePopup();
|
|
|
+ $(".fanhui2 .del").hide();
|
|
|
+ $("#cropPreview").hide();
|
|
|
+ $("#preview_box").show();
|
|
|
+ $(id).cropper('destroy');
|
|
|
+ $('#' + id).attr('src', src);
|
|
|
+ $("#upload").val("");
|
|
|
+ _this.postSubmit();
|
|
|
+ _this.jc = null;
|
|
|
+ }, 200);
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ }, "image/jpeg");
|
|
|
+
|
|
|
+ } else {
|
|
|
+ $.showLoading('处理失败请刷新重试');
|
|
|
+ setTimeout(function(){
|
|
|
+ $.hideLoading();
|
|
|
+ }, 1200);
|
|
|
+ $.closePopup();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // base转文件
|
|
|
+ dataURLtoFile: function (dataurl, filename) {//将base64转换为文件
|
|
|
+ return new File([dataurl], filename, {type: 'image/jpeg'});
|
|
|
+ },
|
|
|
+ //
|
|
|
+ dataURLtoFile1: function (dataurl, filename) {//将base64转换为文件
|
|
|
+ var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
|
|
+ bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
|
|
+ while (n--) {
|
|
|
+ u8arr[n] = bstr.charCodeAt(n);
|
|
|
+ }
|
|
|
+ return new File([u8arr], filename, {type: mime});
|
|
|
+ },
|
|
|
+ // 提交数据
|
|
|
+ postSubmit: function () {
|
|
|
+ var _this = this;
|
|
|
+ if (_this.submitting.submit) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ var formData = new FormData();
|
|
|
+ if (_this.file == null) {
|
|
|
+ $.showLoading('请选择图片');
|
|
|
+ setTimeout(function(){
|
|
|
+ $.hideLoading();
|
|
|
+ }, 1200);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ formData.append('image', _this.file);
|
|
|
+ if (!confirm('确定修改头像？')) {
|
|
|
+ _this.getInfo();
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ console.log(formData)
|
|
|
+ _this.submitting.submit = true;
|
|
|
+ $.showLoading('数据保存中...');
|
|
|
+ $.ajax({
|
|
|
+ url: '/api/member/setAvatar',
|
|
|
+ data: formData,
|
|
|
+ type: "post",
|
|
|
+ dataType: 'json',
|
|
|
+ cache: false,
|
|
|
+ contentType: false,
|
|
|
+ processData: false,
|
|
|
+ success: function (res) {
|
|
|
+ $.hideLoading();
|
|
|
+ _this.submitting.submit = false;
|
|
|
+ if (res.code == 'success') {
|
|
|
+ $.toast(res.message, 'text');
|
|
|
+ //_this.showPop();
|
|
|
+ } else if (res.code == 'login') {
|
|
|
+ var url = res.data.url;
|
|
|
+ $.showLoading(res.message, 'text');
|
|
|
+ if (url) {
|
|
|
+ setTimeout(function () {
|
|
|
+ $.hideLoading();
|
|
|
+ location.href = url;
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ $.toast(res.message, 'text');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function (res) {
|
|
|
+ _this.submitting.submit = false;
|
|
|
+ $.toast(res.message, 'text');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
})
|
