|
|
@@ -17,6 +17,12 @@ var app = new Vue({
|
|
|
width: 0,
|
|
|
height: 0,
|
|
|
},
|
|
|
+ // 预览
|
|
|
+ previewData: {
|
|
|
+
|
|
|
+ },
|
|
|
+ // 参数
|
|
|
+ options: {},
|
|
|
// 图片列表
|
|
|
picList: [],
|
|
|
// 预览状态
|
|
|
@@ -25,24 +31,27 @@ var app = new Vue({
|
|
|
submitting: false,
|
|
|
// 打印方式
|
|
|
printType: 1,
|
|
|
+ colorType: 1,
|
|
|
image: null,
|
|
|
// 设备ID
|
|
|
deviceId: 0,
|
|
|
+ taskKey: '',
|
|
|
// 剪切对象
|
|
|
jc: null,
|
|
|
id: 0,
|
|
|
},
|
|
|
created: function () {
|
|
|
- this.getFileList();
|
|
|
+ //this.getFileList();
|
|
|
var printType = getParam('pt');
|
|
|
this.id = getParam('id');
|
|
|
this.printType = printType ? printType : 1;
|
|
|
+ this.taskKey = getKey();
|
|
|
},
|
|
|
updated: function () {
|
|
|
// 计时器
|
|
|
var _this = this;
|
|
|
var MAX = 100, MIN = 1;
|
|
|
- $('.weui-count__decrease').unbind('click').on('click',function (e) {
|
|
|
+ $('.weui-count__decrease').unbind('click').on('click', function (e) {
|
|
|
if (_this.deviceId) {
|
|
|
return false;
|
|
|
}
|
|
|
@@ -51,7 +60,7 @@ var app = new Vue({
|
|
|
if (number < MIN) number = MIN;
|
|
|
$input.val(number)
|
|
|
})
|
|
|
- $('.weui-count__increase').unbind('click').on('click',function (e) {
|
|
|
+ $('.weui-count__increase').unbind('click').on('click', function (e) {
|
|
|
if (_this.deviceId) {
|
|
|
return false;
|
|
|
}
|
|
|
@@ -99,23 +108,52 @@ var app = new Vue({
|
|
|
if (_this.submitting) {
|
|
|
return false;
|
|
|
}
|
|
|
+
|
|
|
+ if (_this.picList.length <= 0) {
|
|
|
+ $.toast('请先选择图片', 'text');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('提交处理');
|
|
|
+ var total = $(".print-pic").length;
|
|
|
+ // $each(_this.picList,function (k, item) {
|
|
|
$(".print-pic").each(function (k, item) {
|
|
|
var _img = $(this).find('.pic-img');
|
|
|
- var src = $.trim(_img.attr('src'));
|
|
|
- var pic = $.trim(_img.attr('data-pic'));
|
|
|
- var id = $.trim($(this).attr('data-id'));
|
|
|
var name = $.trim(_img.attr('alt'));
|
|
|
var num = parseInt($(this).find('.pic-num').val());
|
|
|
- if (src && (id == 0 || pic != src)) {
|
|
|
- var file = _this.dataURLtoFile(src, name);
|
|
|
- if (file) {
|
|
|
- count++;
|
|
|
- formData.append('image[]', file);
|
|
|
- formData.append('nums[]', num);
|
|
|
- }
|
|
|
- } else if (id > 0) {
|
|
|
- count++;
|
|
|
+ var colorType = $(this).find('.color').attr('data-color');
|
|
|
+ var $previewImg = document.getElementById("pic_preview_" + k);
|
|
|
+ var picId = $(this).attr('data-id');
|
|
|
+ var fileData = typeof(_this.picList[k].fileData) != 'undefined' ? _this.picList[k].fileData : '';
|
|
|
+ // var canvas = document.createElement("canvas");
|
|
|
+ var scale = 12;
|
|
|
+ var opts = {
|
|
|
+ scale: scale, // 添加的scale 参数
|
|
|
+ width: 119,
|
|
|
+ height: 169,
|
|
|
+ background: '#fff',
|
|
|
+ };
|
|
|
+
|
|
|
+ // html2canvas($previewImg, 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 file = _this.dataURLtoFile(src, name ? name : '图片打印.jpeg');
|
|
|
+ formData.append('type', 1);
|
|
|
+ formData.append('taskKey', _this.taskKey);
|
|
|
+ if (fileData) {
|
|
|
+ formData.append('image[]', fileData);
|
|
|
+ formData.append('nums[]', num);
|
|
|
+ formData.append('ids[]', picId);
|
|
|
+ formData.append('colors[]', colorType);
|
|
|
}
|
|
|
+
|
|
|
+ count++;
|
|
|
});
|
|
|
|
|
|
if (count <= 0) {
|
|
|
@@ -125,6 +163,7 @@ var app = new Vue({
|
|
|
|
|
|
// 上传
|
|
|
$.showLoading('文件上传处理中...');
|
|
|
+ _this.submitting = true;
|
|
|
var ajax = $.ajax({
|
|
|
url: '/weixin/upload/image',
|
|
|
data: formData,
|
|
|
@@ -136,37 +175,149 @@ var app = new Vue({
|
|
|
timeout: 30000,
|
|
|
success: function (res) {
|
|
|
$.hideLoading();
|
|
|
+ _this.submitting = false;
|
|
|
if (res.code == 'success') {
|
|
|
- $.modal({
|
|
|
- title: "",
|
|
|
- text: "<div class='scan'>请扫一扫设备上的二维码</div><div class='tips'>获取设备信息</div>",
|
|
|
- buttons: [
|
|
|
- {
|
|
|
- text: "扫一扫",
|
|
|
- className: "warning",
|
|
|
- onClick: function () {
|
|
|
- _this.scan();
|
|
|
- }
|
|
|
- },
|
|
|
- ]
|
|
|
- });
|
|
|
+ _this.showModal();
|
|
|
} else if (res.code == 'login') {
|
|
|
login(res.data.url);
|
|
|
} else {
|
|
|
$.toast(res.message);
|
|
|
}
|
|
|
},
|
|
|
- error: function(res){
|
|
|
+ error: function (res) {
|
|
|
+ _this.submitting = false;
|
|
|
$.toast('服务器错误');
|
|
|
},
|
|
|
complete: function (XMLHttpRequest, status) {
|
|
|
- if(status == 'timeout'){
|
|
|
+ if (status == 'timeout') {
|
|
|
ajax.abort();
|
|
|
$.toast('请求超时，请重新提交');
|
|
|
location.reload();
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
+
|
|
|
+
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ // 显示填写窗口
|
|
|
+ showModal: function () {
|
|
|
+ var _this = this;
|
|
|
+ $.closeModal();
|
|
|
+ $.modal({
|
|
|
+ title: "",
|
|
|
+ autoClose: false,
|
|
|
+ text: "<div class='scan'>填写/扫码打印设备</div><div class='tips'>设备号<input type='text' id='device_code' placeholder='请填写打印机设备号'></div>",
|
|
|
+ buttons: [
|
|
|
+ {
|
|
|
+ text: "取消",
|
|
|
+ className: "default",
|
|
|
+ onClick: function () {
|
|
|
+ $.closeModal();
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "扫码打印",
|
|
|
+ className: "warning",
|
|
|
+ onClick: function () {
|
|
|
+ _this.scan();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "填写打印",
|
|
|
+ className: "success",
|
|
|
+ onClick: function () {
|
|
|
+ _this.inputCode();
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 输入设备号打印
|
|
|
+ inputCode: function () {
|
|
|
+ var _this = this;
|
|
|
+ var deviceCode = $.trim($("#device_code").val());
|
|
|
+ if (deviceCode == '' || deviceCode === null) {
|
|
|
+ $.toast('请填写设备号');
|
|
|
+ setTimeout(function () {
|
|
|
+ _this.showModal();
|
|
|
+ }, 500)
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ $.post('/weixin/print/checkDevice', {deviceCode: deviceCode}, function (res) {
|
|
|
+ if (res.code == 'success') {
|
|
|
+ var deviceId = res.data.id;
|
|
|
+ $.closeModal();
|
|
|
+ $.modal({
|
|
|
+ title: "",
|
|
|
+ text: "<div class='scan'>设备验证成功</div><div class='info'></div><div class='tips'>点击下方确认下单</div>",
|
|
|
+ buttons: [
|
|
|
+ {
|
|
|
+ text: "取消",
|
|
|
+ className: "default",
|
|
|
+ onClick: function () {
|
|
|
+ $.closeModal();
|
|
|
+ setTimeout(function () {
|
|
|
+ _this.showModal();
|
|
|
+ }, 500)
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "确认下单",
|
|
|
+ className: "warning",
|
|
|
+ onClick: function () {
|
|
|
+ var params = {
|
|
|
+ clusterId: _this.id,
|
|
|
+ deviceId: deviceId,
|
|
|
+ printType: _this.printType,
|
|
|
+ colorType: _this.colorType,
|
|
|
+ taskKey: _this.taskKey,
|
|
|
+ type: 1
|
|
|
+ };
|
|
|
+
|
|
|
+ $.showLoading('订单处理中...');
|
|
|
+ $.post('/weixin/order/confirm', params, function (res) {
|
|
|
+ $.hideLoading();
|
|
|
+ if (res.code == 'success') {
|
|
|
+ var msg = _this.id > 0 && _this.printType == 2 ? '参与拼团成功' : (_this.printType == 2 ? '发起拼团成功' : '下单成功');
|
|
|
+ $.showLoading(msg + '，即将前往支付...');
|
|
|
+ setTimeout(function () {
|
|
|
+ location.href = '/weixin/order/pay?id=' + res.data;
|
|
|
+ }, 800);
|
|
|
+
|
|
|
+ } else if (res.code == 'login') {
|
|
|
+ login(res.data.url);
|
|
|
+ } else {
|
|
|
+ $.closeModal();
|
|
|
+ $.modal({
|
|
|
+ title: "",
|
|
|
+ text: "<div class='scan'>下单失败</div><div class='tips'>" + res.message + "</div>",
|
|
|
+ buttons: [
|
|
|
+ {
|
|
|
+ text: "取消",
|
|
|
+ onClick: function () {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ }, "json")
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ $.toast(res.message);
|
|
|
+ setTimeout(function () {
|
|
|
+ _this.showModal();
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+ }, 'json');
|
|
|
},
|
|
|
// 扫码设备
|
|
|
scan: function () {
|
|
|
@@ -186,6 +337,7 @@ var app = new Vue({
|
|
|
// 初始化处理
|
|
|
wx.ready(function () {
|
|
|
// 微信扫一扫
|
|
|
+ $.closeModal();
|
|
|
wx.scanQRCode({
|
|
|
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
|
|
|
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
|
|
|
@@ -199,6 +351,17 @@ var app = new Vue({
|
|
|
text: "<div class='scan'>扫码成功</div><div class='info'></div><div class='tips'>点击下方确认下单</div>",
|
|
|
buttons: [
|
|
|
{
|
|
|
+ text: "取消",
|
|
|
+ className: "default",
|
|
|
+ onClick: function () {
|
|
|
+ $.closeModal();
|
|
|
+ setTimeout(function () {
|
|
|
+ _this.showModal();
|
|
|
+ }, 500)
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
text: "确认下单",
|
|
|
className: "warning",
|
|
|
onClick: function () {
|
|
|
@@ -206,6 +369,8 @@ var app = new Vue({
|
|
|
clusterId: _this.id,
|
|
|
deviceId: deviceId,
|
|
|
printType: _this.printType,
|
|
|
+ colorType: _this.colorType,
|
|
|
+ taskKey: _this.taskKey,
|
|
|
type: 1
|
|
|
};
|
|
|
|
|
|
@@ -225,7 +390,7 @@ var app = new Vue({
|
|
|
$.closeModal();
|
|
|
$.modal({
|
|
|
title: "",
|
|
|
- text: "<div class='scan'>下单失败</div><div class='tips'>"+res.message+"</div>",
|
|
|
+ text: "<div class='scan'>下单失败</div><div class='tips'>" + res.message + "</div>",
|
|
|
buttons: [
|
|
|
{
|
|
|
text: "取消",
|
|
|
@@ -250,7 +415,7 @@ var app = new Vue({
|
|
|
]
|
|
|
});
|
|
|
} else {
|
|
|
- webToast('扫码信息错误', "middle", 1000)
|
|
|
+ $.toast('扫码信息错误');
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
@@ -266,100 +431,147 @@ var app = new Vue({
|
|
|
}
|
|
|
return new File([u8arr], filename, {type: mime});
|
|
|
},
|
|
|
+ // base转文件
|
|
|
+ dataBlobtoFile: function (dataurl, filename) {//将base64转换为文件
|
|
|
+ return new File([dataurl], filename, {type: 'image/jpeg'});
|
|
|
+ },
|
|
|
+ //
|
|
|
+ dataURLtoBlob: function(dataurl) {
|
|
|
+ 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 Blob([u8arr], {type: mime});
|
|
|
+ },
|
|
|
// 删除图片
|
|
|
picDel: function (id) {
|
|
|
var fileId = $("#pic_" + id).attr('data-id');
|
|
|
$("#pic_" + id).detach();
|
|
|
+ this.picList[id] = {};
|
|
|
if (fileId) {
|
|
|
$.post("/weixin/print/fileDel", {id: fileId})
|
|
|
}
|
|
|
},
|
|
|
+ // 彩印
|
|
|
+ picColor: function (k, type) {
|
|
|
+ if (type == 1) {
|
|
|
+ this.colorType = 1;
|
|
|
+ $(".print-pic .op .color1").addClass('active');
|
|
|
+ $(".print-pic .op .color2").removeClass('active');
|
|
|
+ } else {
|
|
|
+ this.colorType = 2;
|
|
|
+ $(".print-pic .op .color1").removeClass('active');
|
|
|
+ $(".print-pic .op .color2").addClass('active');
|
|
|
+ }
|
|
|
+ },
|
|
|
// 编辑图片
|
|
|
- picEdit: function (id) {
|
|
|
+ picEdit: function (id, data, type) {
|
|
|
var _this = this;
|
|
|
$.closePopup();
|
|
|
- _this.cropCancel();
|
|
|
- _this.cropCancel();
|
|
|
-
|
|
|
- var imgWidth = $('body').width();
|
|
|
- $("#cropBox .crop-img").html(" ");
|
|
|
- var src = $("#pic_img_" + id).attr('data-pic');
|
|
|
- _this.cropParams = {id: id, src: src, cropSrc: src};
|
|
|
- _this.image = new Image();
|
|
|
- _this.image.src = src;
|
|
|
- _this.image.id = 'cropImg_' + id;
|
|
|
- _this.image.setAttribute('class', 'img');
|
|
|
- // image.setAttribute('data-pic', src);
|
|
|
- _this.image.style.width = imgWidth + 'px !important';
|
|
|
- _this.image.style.display = 'block !important';
|
|
|
-
|
|
|
- var canvas = document.createElement('canvas');
|
|
|
- canvas.id = 'cut';
|
|
|
- canvas.style.display = 'none';
|
|
|
- canvas.style.width = '100%';
|
|
|
- canvas.style.height = '100%';
|
|
|
- $("#cropBox .crop-img").append(_this.image);
|
|
|
- $("#cropBox .crop-img").append(canvas);
|
|
|
- $("#cropBox .crop-preview").html('<div id="preview" class="preview"><img id="cropImgPreview" src="" alt=""></div>');
|
|
|
- //_this.loadCrop(id, _this.image);
|
|
|
+ _this.cropParams = data;
|
|
|
+ _this.cropParams.id = id;
|
|
|
+ _this.cropParams.type = type;
|
|
|
+ _this.cropParams.resize = 0;
|
|
|
+ _this.cropParams.rotate = 0;
|
|
|
+ if (_this.cropParams.url == '') {
|
|
|
+ $.toast('请重新添加图片');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ $("body").css('overflowY','hidden');
|
|
|
+ // $("#cropImg").remove();
|
|
|
+ $(".crop-img").html('<img id="cropImg" src="" alt="" off="">');
|
|
|
+ if(id>=0){
|
|
|
+ $("#cropImg").attr('src', _this.cropParams.old_url);
|
|
|
+ }else{
|
|
|
+ $("#cropImg").attr('src', _this.cropParams.url);
|
|
|
+ }
|
|
|
+ var iWidth = $("body").outerWidth();
|
|
|
+ var iHeight = $("body").height()-130;
|
|
|
+ var cropWidth = $('body').width();
|
|
|
+ $image = $("#cropImg");
|
|
|
$("#cropBox").popup();
|
|
|
- _this.image.onload = function () {
|
|
|
- if (_this.jc != null) {
|
|
|
- _this.jc.destroy();
|
|
|
+ _this.options = {
|
|
|
+ // aspectRatio: iWidth/iHeight,
|
|
|
+ center: true,
|
|
|
+ movable: true,
|
|
|
+ zoomable: true,
|
|
|
+ zoomOnTouch: true,
|
|
|
+ zoomOnWheel: false,
|
|
|
+ scalable: true,
|
|
|
+ wheelZoomRatio: 0.1,
|
|
|
+ responsive: true,
|
|
|
+ guides: false,
|
|
|
+ strict: false,
|
|
|
+ width: iWidth,
|
|
|
+ dragMode: 'move',
|
|
|
+ height: iHeight,
|
|
|
+ autoCropArea: 1,
|
|
|
+ // cropBoxMovable: false,
|
|
|
+ // cropBoxResizable: false,
|
|
|
+ minContainerWidth: iWidth,
|
|
|
+ minContainerHeight: iHeight,
|
|
|
+ minCropBoxWidth: 80,
|
|
|
+ maxCropBoxWidth: iWidth,
|
|
|
+ minCropBoxHeight: 80,
|
|
|
+ canvasWeight: cropWidth,
|
|
|
+ canvasHeight: iHeight,
|
|
|
+ // minCanvasWeight: cropWidth*0.4,
|
|
|
+ maxCanvasWeight: cropWidth,
|
|
|
+ // minCanvasHeight: iHeight,
|
|
|
+ viewMode: 1,
|
|
|
+ crop: function (data) {
|
|
|
+ _this.cropParams.data = data;
|
|
|
+
|
|
|
+ var rate = 1;
|
|
|
+ if(data.height >2000 || data.width>2000){
|
|
|
+ rate = 0.8;
|
|
|
+ }else if( data.height < 1000 || data.width<1000){
|
|
|
+ rate = 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ _this.cropParams.cropData = {
|
|
|
+ // width: iWidth * rate,
|
|
|
+ width: data.width * rate,
|
|
|
+ // height: iHeight * rate,
|
|
|
+ height: data.height * rate,
|
|
|
+ rotate: data.rotate,
|
|
|
+ imageSmoothingQuality: 'high',
|
|
|
+ fillColor: '#fff',
|
|
|
+ };
|
|
|
}
|
|
|
- _this.loadCrop(id, _this.image);
|
|
|
}
|
|
|
|
|
|
- },
|
|
|
- // 加载剪切处理
|
|
|
- loadCrop: function (id, image) {
|
|
|
- var _this = this;
|
|
|
- _this.cropPreviewStatus = false;
|
|
|
if (_this.jc != null) {
|
|
|
- _this.jc.setImage(image.src)
|
|
|
- _this.jc.destroy();
|
|
|
+ $image.cropper(_this.options);
|
|
|
+ _this.jc = $image.cropper('replace', _this.cropParams.old_url);
|
|
|
+ $image.cropper('setData', {
|
|
|
+ width: iWidth,
|
|
|
+ height: iHeight
|
|
|
+ });
|
|
|
+
|
|
|
+ } else {
|
|
|
+ $image.cropper(_this.options);
|
|
|
+ _this.jc = $image.cropper('replace', _this.cropParams.old_url);
|
|
|
+ $image.cropper('setData', {
|
|
|
+ width: iWidth,
|
|
|
+ height: iHeight
|
|
|
+ });
|
|
|
}
|
|
|
- var imgWidth = $(".crop-img").outerWidth();
|
|
|
- var imgHeight = $(".crop-img").outerHeight();
|
|
|
- var iWidth = image.width;
|
|
|
- var iHeight = image.height;
|
|
|
- _this.cropParams.width = iWidth;
|
|
|
- _this.cropParams.height = iHeight;
|
|
|
- $("#cropBox .crop-img").show();
|
|
|
- $("#cropBox .crop-preview").hide()
|
|
|
-
|
|
|
- $("#cropImg_" + id).Jcrop({
|
|
|
- aspectRatio: 0,
|
|
|
- allowSelect: false,
|
|
|
- allowResize: true,
|
|
|
- // boxWidth: 640,
|
|
|
- // boxHeight: imgHeight,
|
|
|
- setSelect: [(imgWidth) / 4, 0, imgWidth * (3 / 4), imgHeight],
|
|
|
- maxSize: [imgWidth, imgHeight],
|
|
|
- minSize: [imgWidth / 3, imgHeight / 2],
|
|
|
- onChange: function (c) {
|
|
|
- if (parseInt(c.w) > 0 && c.x <= (imgWidth - c.w)) {
|
|
|
- var width = c.w > imgWidth ? imgWidth : c.w;
|
|
|
- $("#cropImgPreview").attr('src', image.src);
|
|
|
- $("#preview").css({
|
|
|
- width: width + 'px',
|
|
|
- height: c.h + 'px',
|
|
|
- margin: '0 auto',
|
|
|
- overflow: 'hidden'
|
|
|
- });
|
|
|
- //$.toptip('当前数据：W：' + imgWidth + 'H：' + imgHeight + '+' + JSON.stringify(c), 10000, 'error');
|
|
|
- $("#cropImgPreview").css({
|
|
|
- width: imgWidth + 'px',
|
|
|
- height: 'px',
|
|
|
- marginLeft: '-' + c.x + 'px',
|
|
|
- marginTop: '-' + c.y + 'px'
|
|
|
- });
|
|
|
- console.log(c.x, c.y, c.w, c.h);
|
|
|
- }
|
|
|
- },
|
|
|
- }, function () {
|
|
|
- _this.jc = this;
|
|
|
- });
|
|
|
+
|
|
|
+ _this.cropRotate();
|
|
|
+
|
|
|
+ },
|
|
|
+ // 预览
|
|
|
+ picPreview: function(id, data){
|
|
|
+ this.previewData = data;
|
|
|
+ $.closePopup();
|
|
|
+ $("#previewBox").popup();
|
|
|
+ },
|
|
|
+ // 取消剪切
|
|
|
+ previewCancel: function () {
|
|
|
+ $.closePopup();
|
|
|
+ this.previewData = {};
|
|
|
},
|
|
|
// 图片大小
|
|
|
resetSizeImg: function (image, FitWidth, FitHeight) {
|
|
|
@@ -388,66 +600,324 @@ var app = new Vue({
|
|
|
},
|
|
|
// 取消剪切
|
|
|
cropCancel: function () {
|
|
|
- if (this.jc != null) {
|
|
|
- this.jc.destroy();
|
|
|
- }
|
|
|
- this.cropParams = {id: 0, src: '', cropSrc: ''};
|
|
|
- $("#cropBox .crop-preview").hide();
|
|
|
- $("#cropBox .crop-preview").html("");
|
|
|
- $(".crop-img").html("");
|
|
|
$.closePopup();
|
|
|
+ $("#previewBox").hide();
|
|
|
+ if (this.jc != false) {
|
|
|
+ $("body").css('overflowY','scroll');
|
|
|
+ $("#cropImg").cropper('destroy');
|
|
|
+ this.jc = null;
|
|
|
+ this.cropParams.resize = 0;
|
|
|
+ $("#cropImg").remove();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 缩放
|
|
|
+ cropZoom: function (ele, type) {
|
|
|
+ $("#cropImg").cropper("zoom", type == 1 ? 0.1 : -0.1);
|
|
|
+ },
|
|
|
+ // 旋转
|
|
|
+ rotate: function (ele, type) {
|
|
|
+ if(type == 1){
|
|
|
+ $("#cropImg").cropper("rotate", -90);
|
|
|
+ }else{
|
|
|
+ $("#cropImg").cropper("rotate", 90);
|
|
|
+ }
|
|
|
+ this.cropParams.resize = 0;
|
|
|
+ var data = $("#cropImg").cropper('getContainerData');
|
|
|
+ var cdata = $("#cropImg").cropper('getCanvasData');
|
|
|
+ $("#cropImg").cropper('setCropBoxData', {
|
|
|
+ width: data.width,
|
|
|
+ height: data.height,
|
|
|
+ // top: data.height-cdata.height>0? (data.height-cdata.height)/2 : 0,
|
|
|
+ // left: data.width-cdata.width>0? (data.width-cdata.width)/2 : 0
|
|
|
+ });
|
|
|
},
|
|
|
- // 预览剪切
|
|
|
- cropPreview: function () {
|
|
|
- this.cropPreviewStatus = true;
|
|
|
- $("#cropBox .crop-img").hide();
|
|
|
- // $("#cropImgPreview").attr('src', this.cropParams.cropSrc);
|
|
|
- $("#cropBox .crop-preview").show();
|
|
|
+ // 适应
|
|
|
+ cropSize: function(){
|
|
|
+ var _this = this;
|
|
|
+ var data = _this.cropParams.data;
|
|
|
+ if(_this.cropParams.resize>=2){
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if(data.height<data.width){
|
|
|
+ $("#cropImg").cropper("rotate", 90);
|
|
|
+ _this.cropParams.cropData.rotate = 90;
|
|
|
+ }
|
|
|
+ var cwidth = $(".cropper-canvas").outerWidth();
|
|
|
+ var size = data.height<data.width? data.height: data.width;
|
|
|
+ var iWidth = $("body").outerWidth();
|
|
|
+ var iHeight = $("body").height()-130;
|
|
|
+ if(size<iWidth){
|
|
|
+ var rate = iWidth/size;
|
|
|
+ $("#cropImg").cropper("zoom", rate);
|
|
|
+ }else if(cwidth<iWidth){
|
|
|
+ var rate = iWidth/cwidth;
|
|
|
+ $("#cropImg").cropper("zoom", rate);
|
|
|
+ }
|
|
|
+ _this.cropParams.resize++;
|
|
|
+ var data = $("#cropImg").cropper('getContainerData');
|
|
|
+ var cdata = $("#cropImg").cropper('getCanvasData');
|
|
|
+ $("#cropImg").cropper('setCropBoxData', {
|
|
|
+ width: data.width,
|
|
|
+ height: data.height,
|
|
|
+ // top: data.height-cdata.height>0? (data.height-cdata.height)/2 : 0,
|
|
|
+ // left: data.width-cdata.width>0? (data.width-cdata.width)/2 : 0
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ // 自适应旋转
|
|
|
+ cropRotate: function(){
|
|
|
+ var _this = this;
|
|
|
+ var image = new Image();
|
|
|
+ image.src = _this.cropParams.url;
|
|
|
+ var height = $("#cropImg").outerWidth();
|
|
|
+ var width = $("#cropImg").outerHeight();
|
|
|
+ if(height<width){
|
|
|
+ $("#cropImg").cropper("rotate", 90);
|
|
|
+ _this.cropParams.crotate = 90;
|
|
|
+ }
|
|
|
+ _this.cropParams.rotate = 1;
|
|
|
+ var data = $("#cropImg").cropper('getContainerData');
|
|
|
+ var cdata = $("#cropImg").cropper('getCanvasData');
|
|
|
+ $("#cropImg").cropper('setCropBoxData', {
|
|
|
+ width: data.width,
|
|
|
+ height: data.height,
|
|
|
+ // top: data.height-cdata.height>0? (data.height-cdata.height)/2 : 0,
|
|
|
+ // left: data.width-cdata.width>0? (data.width-cdata.width)/2 : 0
|
|
|
+ });
|
|
|
},
|
|
|
// 确定剪切
|
|
|
cropConfirm: function () {
|
|
|
var _this = this;
|
|
|
- _this.jc.destroy();
|
|
|
- $(".crop-img").html("");
|
|
|
- $.showLoading('图片剪切处理中...');
|
|
|
- var $previewImg = document.getElementById("preview");
|
|
|
- html2canvas($previewImg).then(function (canvas) {
|
|
|
- var src = canvas.toDataURL('image/jpeg');
|
|
|
- $("#cropBox .crop-preview").hide();
|
|
|
- $("#cropBox .crop-preview").html("");
|
|
|
- $("#pic_img_" + _this.cropParams.id).attr('src', src);
|
|
|
- _this.cropParams = {id: 0, src: '', cropSrc: ''};
|
|
|
- $.closePopup();
|
|
|
- $.hideLoading();
|
|
|
- });
|
|
|
+ $("body").css('overflowY','scroll');
|
|
|
+ $(".crop-img").show();
|
|
|
+ this.cropPreviewStatus = false;
|
|
|
+ if (this.jc != null) {
|
|
|
+ $.showLoading('图片处理中...');
|
|
|
+ var id = _this.cropParams.id;
|
|
|
+ $image = $("#cropImg");
|
|
|
+ var canvas = $image.cropper('getCroppedCanvas',_this.cropParams.cropData);
|
|
|
+ var blob = canvas.toBlob(function (blob) {
|
|
|
+ //生成Blob的图片格式
|
|
|
+ if (blob != null) {
|
|
|
+ var timestamp = Date.parse(new Date());
|
|
|
+ blob.name = timestamp + ".jpg";
|
|
|
+ url = URL.createObjectURL(blob);
|
|
|
+ if(_this.cropParams.type && id>=0){
|
|
|
+ _this.picList[id] = _this.cropParams;
|
|
|
+ _this.picList[id].url = url;
|
|
|
+ _this.picList[id].preview = url;
|
|
|
+ _this.picList[id].fileData = _this.dataBlobtoFile(blob, blob.name);
|
|
|
+ }else{
|
|
|
+ var data = _this.cropParams;
|
|
|
+ data.url = url;
|
|
|
+ data.preview = url;
|
|
|
+ data.fileData = _this.dataBlobtoFile(blob, blob.name);
|
|
|
+ _this.picList.push(data);
|
|
|
+ }
|
|
|
+ setTimeout(function () {
|
|
|
+ $.closePopup();
|
|
|
+ $.hideLoading();
|
|
|
+ _this.cropParams = {};
|
|
|
+ _this.jc = null;
|
|
|
+ $("#cropImg").cropper('destroy');
|
|
|
+ $("#cropImg").remove();
|
|
|
+ }, 200);
|
|
|
+ }else{
|
|
|
+ $.closePopup();
|
|
|
+ $.hideLoading();
|
|
|
+ $.showLoading('图片处理失败，请重新上传');
|
|
|
+ _this.cropParams = {};
|
|
|
+ setTimeout(function(){
|
|
|
+ $.hideLoading();
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ }, "image/jpeg");
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
},
|
|
|
// 重新剪切
|
|
|
cropReset: function () {
|
|
|
- this.cropPreviewStatus = false;
|
|
|
- $("#cropBox .crop-img").show();
|
|
|
- $("#cropBox .crop-preview").hide();
|
|
|
+ $image = $("#cropImg");
|
|
|
+ $image.cropper(this.options);
|
|
|
+ this.jc = $image.cropper('replace', this.cropParams.old_url);
|
|
|
+ this.cropParams.resize = false;
|
|
|
+ },
|
|
|
+ // 旋转图片处理
|
|
|
+ rotateImg: function(img, direction,canvas) {
|
|
|
+ //alert(img);
|
|
|
+ //最小与最大旋转方向，图片旋转4次后回到原方向
|
|
|
+ var min_step = 0;
|
|
|
+ var max_step = 3;
|
|
|
+ //var img = document.getElementById(pid);
|
|
|
+ if (img == null)return;
|
|
|
+ //img的高度和宽度不能在img元素隐藏后获取，否则会出错
|
|
|
+ var height = img.height;
|
|
|
+ var width = img.width;
|
|
|
+ //var step = img.getAttribute('step');
|
|
|
+ var step = 2;
|
|
|
+ if (step == null) {
|
|
|
+ step = min_step;
|
|
|
+ }
|
|
|
+ if (direction == 'right') {
|
|
|
+ step++;
|
|
|
+ //旋转到原位置，即超过最大值
|
|
|
+ step > max_step && (step = min_step);
|
|
|
+ } else {
|
|
|
+ step--;
|
|
|
+ step < min_step && (step = max_step);
|
|
|
+ }
|
|
|
+ //img.setAttribute('step', step);
|
|
|
+ /*var canvas = document.getElementById('pic_' + pid);
|
|
|
+ if (canvas == null) {
|
|
|
+ img.style.display = 'none';
|
|
|
+ canvas = document.createElement('canvas');
|
|
|
+ canvas.setAttribute('id', 'pic_' + pid);
|
|
|
+ img.parentNode.appendChild(canvas);
|
|
|
+ } */
|
|
|
+ //旋转角度以弧度值为参数
|
|
|
+ var degree = step * 90 * Math.PI / 180;
|
|
|
+ var ctx = canvas.getContext('2d');
|
|
|
+ switch (step) {
|
|
|
+ case 0:
|
|
|
+ canvas.width = width;
|
|
|
+ canvas.height = height;
|
|
|
+ ctx.drawImage(img, 0, 0);
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ canvas.width = height;
|
|
|
+ canvas.height = width;
|
|
|
+ ctx.rotate(degree);
|
|
|
+ ctx.drawImage(img, 0, -height);
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ canvas.width = width;
|
|
|
+ canvas.height = height;
|
|
|
+ ctx.rotate(degree);
|
|
|
+ ctx.drawImage(img, -width, -height);
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ canvas.width = height;
|
|
|
+ canvas.height = width;
|
|
|
+ ctx.rotate(degree);
|
|
|
+ ctx.drawImage(img, -width, 0);
|
|
|
+ break;
|
|
|
+ }
|
|
|
},
|
|
|
// 选择图片
|
|
|
selectPic: function (ele) {
|
|
|
var _this = this;
|
|
|
var files = ele.target.files;
|
|
|
+ var id = _this.picList.length;
|
|
|
if (files.length > 0) {
|
|
|
$.each(files, function (k, file) {
|
|
|
if (file) {
|
|
|
+ var Orientation = null;
|
|
|
+ //获取照片方向角属性，用户旋转控制
|
|
|
+ EXIF.getData(file, function() {
|
|
|
+ // alert(EXIF.pretty(this));
|
|
|
+ EXIF.getAllTags(this);
|
|
|
+ //alert(EXIF.getTag(this, 'Orientation'));
|
|
|
+ Orientation = EXIF.getTag(this, 'Orientation');
|
|
|
+ //return;
|
|
|
+ });
|
|
|
+
|
|
|
var reader = new FileReader();
|
|
|
reader.readAsDataURL(file);
|
|
|
+ var blobUrl = URL.createObjectURL(file);
|
|
|
reader.onloadend = function (even) {
|
|
|
- var img = {
|
|
|
- id: 0,
|
|
|
- url: even.currentTarget.result,
|
|
|
- name: file.name,
|
|
|
- file_size: file.size,
|
|
|
- file_type: file.type
|
|
|
- };
|
|
|
- _this.picList.push(img);
|
|
|
+ var image = new Image();
|
|
|
+ image.src = even.currentTarget.result;
|
|
|
+ image.onload = function(){
|
|
|
+ var expectWidth = this.naturalWidth;
|
|
|
+ var expectHeight = this.naturalHeight;
|
|
|
+
|
|
|
+ if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
|
|
|
+ expectWidth = 800;
|
|
|
+ expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
|
|
|
+ } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
|
|
|
+ expectHeight = 1200;
|
|
|
+ expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
|
|
|
+ }
|
|
|
+ var canvas = document.createElement("canvas");
|
|
|
+ var ctx = canvas.getContext("2d");
|
|
|
+ canvas.width = expectWidth;
|
|
|
+ canvas.height = expectHeight;
|
|
|
+ ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
|
|
|
+ var base64 = null;
|
|
|
+ //修复ios
|
|
|
+ if (navigator.userAgent.match(/iphone/i)) {
|
|
|
+ //alert(expectWidth + ',' + expectHeight);
|
|
|
+ //如果方向角不为1，都需要进行旋转 added by lzk
|
|
|
+ if(Orientation != "" && Orientation != 1){
|
|
|
+ //alert('旋转处理');
|
|
|
+ switch(Orientation){
|
|
|
+ case 6://需要顺时针（向左）90度旋转
|
|
|
+ //alert('需要顺时针（向左）90度旋转');
|
|
|
+ _this.rotateImg(this,'left',canvas);
|
|
|
+ break;
|
|
|
+ case 8://需要逆时针（向右）90度旋转
|
|
|
+ //alert('需要顺时针（向右）90度旋转');
|
|
|
+ _this.rotateImg(this,'right',canvas);
|
|
|
+ break;
|
|
|
+ case 3://需要180度旋转
|
|
|
+ //alert('需要180度旋转');
|
|
|
+ _this.rotateImg(this,'right',canvas);//转两次
|
|
|
+ _this.rotateImg(this,'right',canvas);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ base64 = canvas.toDataURL("image/jpeg", 0.8);
|
|
|
+ }else{
|
|
|
+ //alert(Orientation);
|
|
|
+ if(Orientation != "" && Orientation != 1){
|
|
|
+ //alert('旋转处理');
|
|
|
+ switch(Orientation){
|
|
|
+ case 6://需要顺时针（向左）90度旋转
|
|
|
+ //alert('需要顺时针（向左）90度旋转');
|
|
|
+ _this.rotateImg(this,'left',canvas);
|
|
|
+ break;
|
|
|
+ case 8://需要逆时针（向右）90度旋转
|
|
|
+ //alert('需要顺时针（向右）90度旋转');
|
|
|
+ _this.rotateImg(this,'right',canvas);
|
|
|
+ break;
|
|
|
+ case 3://需要180度旋转
|
|
|
+ //alert('需要180度旋转');
|
|
|
+ _this.rotateImg(this,'right',canvas);//转两次
|
|
|
+ _this.rotateImg(this,'right',canvas);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ base64 = canvas.toDataURL("image/jpeg", 0.8);
|
|
|
+ }
|
|
|
+ //uploadImage(base64);
|
|
|
+ //$("#myImage").attr("src", base64);
|
|
|
+
|
|
|
+ var img = {
|
|
|
+ id: 0,
|
|
|
+ url: base64,
|
|
|
+ old_url: base64,
|
|
|
+ // url: base64,
|
|
|
+ preview: base64,
|
|
|
+ name: file.name,
|
|
|
+ blobUrl: blobUrl,
|
|
|
+ file_size: file.size,
|
|
|
+ file_type: file.type
|
|
|
+ };
|
|
|
+
|
|
|
+ $("#upload").val("");
|
|
|
+ // _this.picList.push(img);
|
|
|
+ // console.log(_this.picList)
|
|
|
+ _this.picEdit(0, img, 0);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
+
|
|
|
+ /*if (count > 0) {
|
|
|
+ _this.getFileList(0);
|
|
|
+ }*/
|
|
|
}
|
|
|
|
|
|
}
|
