wesmiler

public/static/weixin/js/photo-0315.js

@@ -0,0 +1,871 @@
+var app = new Vue({
+    el: '#app',
+    data: {
+        // 用户信息
+        memberInfo: {},
+        // 当前编辑后图片
+        editPic: '',
+        // 剪切参数
+        cropParams: {
+            id: 0,
+            src: '',
+            cropSrc: '',
+            min: 400,
+            max: 200,
+            boundx: 0,
+            boundy: 0,
+            width: 0,
+            height: 0,
+        },
+        // 预览
+        previewData: {
+
+        },
+        // 参数
+        options: {},
+        // 图片列表
+        picList: [],
+        // 预览状态
+        cropPreviewStatus: false,
+        // 上传状态
+        submitting: false,
+        // 打印方式
+        printType: 1,
+        colorType: 1,
+        image: null,
+        // 设备ID
+        deviceId: 0,
+        taskKey: '',
+        // 剪切对象
+        jc: null,
+        id: 0,
+    },
+    created: function () {
+        //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) {
+            if (_this.deviceId) {
+                return false;
+            }
+            var $input = $(e.target).parent().find('.weui-count__number');
+            var number = parseInt($input.val() || "0") - 1
+            if (number < MIN) number = MIN;
+            $input.val(number)
+        })
+        $('.weui-count__increase').unbind('click').on('click', function (e) {
+            if (_this.deviceId) {
+                return false;
+            }
+            var $input = $(e.target).parent().find('.weui-count__number');
+            var number = parseInt($input.val() || "0") + 1
+            if (number > MAX) number = MAX;
+            $input.val(number)
+        });
+        $(".weui-count__number").blur(function () {
+            var num = $.trim($(this).val());
+            if (!/[1-9][0-9]{0,2}/.test(num) || num < MIN || num > MAX) {
+                num = 1;
+            }
+            $(this).val(num);
+        })
+    },
+    methods: {
+        // 获取图片列表
+        getFileList: function () {
+            var _this = this;
+            $.post('/weixin/print/getFileList', {}, function (res) {
+                if (res.code == 'success') {
+                    _this.picList = res.data
+                } else if (res.code == 'login') {
+                    login(res.data.url);
+                }
+            }, "json");
+        },
+        // 获取用户信息
+        getMemberInfo: function () {
+            var _this = this;
+            $.post('/weixin/member/getMemberInfo', {}, function (res) {
+                if (res.code == 'success') {
+                    _this.memberInfo = res.data
+                } else if (res.code == 'login') {
+                    login(res.data.url);
+                }
+            }, "json");
+        },
+        // 提交
+        doSubmit: function () {
+            var _this = this;
+            var count = 0;
+            var formData = new FormData();
+            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 name = $.trim(_img.attr('alt'));
+                var num = parseInt($(this).find('.pic-num').val());
+                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) {
+                $.toast('请选择打印的图片');
+                return false;
+            }
+
+            // 上传
+            $.showLoading('文件上传处理中...');
+            _this.submitting = true;
+            var ajax = $.ajax({
+                url: '/weixin/upload/image',
+                data: formData,
+                type: "post",
+                dataType: 'json',
+                cache: false,
+                contentType: false,
+                processData: false,
+                timeout: 30000,
+                success: function (res) {
+                    $.hideLoading();
+                    _this.submitting = false;
+                    if (res.code == 'success') {
+                        _this.showModal();
+                    } else if (res.code == 'login') {
+                        login(res.data.url);
+                    } else {
+                        $.toast(res.message);
+                    }
+                },
+                error: function (res) {
+                    _this.submitting = false;
+                    $.toast('服务器错误');
+                },
+                complete: function (XMLHttpRequest, status) {
+                    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 () {
+            var _this = this;
+            $.post('/weixin/index/getJssdkParams', {url: location.href}, function (res) {
+                var params = res.data;
+                // 微信JSSDK
+                wx.config({
+                    debug: false, // 是否调试模式
+                    appId: params.appId, // 必填，公众号的唯一标识
+                    timestamp: params.timestamp, // 必填，生成签名的时间戳
+                    nonceStr: params.nonceStr, // 必填，生成签名的随机串
+                    signature: params.signature,// 必填，签名
+                    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'scanQRCode'] // 必填，需要使用的JS接口列表
+                });
+
+                // 初始化处理
+                wx.ready(function () {
+                    // 微信扫一扫
+                    $.closeModal();
+                    wx.scanQRCode({
+                        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
+                        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
+                        success: function (res) {
+                            var deviceId = res.resultStr;
+                            _this.deviceId = deviceId;
+                            if (deviceId) {
+                                $.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;
+                                                                    }
+                                                                },
+                                                                {
+                                                                    text: "重新扫码下单",
+                                                                    className: "warning",
+                                                                    onClick: function () {
+                                                                        _this.scan();
+                                                                    }
+                                                                },
+                                                            ]
+                                                        });
+                                                    }
+
+                                                }, "json")
+                                            }
+                                        },
+                                    ]
+                                });
+                            } else {
+                                $.toast('扫码信息错误');
+                            }
+                        }
+                    });
+                });
+            }, "JSON");
+        },
+        // base转文件
+        dataURLtoFile: 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});
+        },
+        // 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, data, type) {
+            var _this = this;
+            $.closePopup();
+            _this.cropParams = data;
+            _this.cropParams.id = id;
+            _this.cropParams.type = type;
+            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;
+            $image = $("#cropImg");
+
+            var cropWidth = $('body').width();
+            $("#cropBox").popup();
+            _this.options = {
+                aspectRatio: 0,
+                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: data.width * rate,
+                        height: data.height * rate,
+                        rotate: data.rotate,
+                        imageSmoothingQuality: 'high',
+                        fillColor: '#fff',
+                    };
+                }
+            }
+
+            if (_this.jc != null) {
+                $image.cropper(_this.options);
+                _this.jc = $image.cropper('replace', _this.cropParams.old_url);
+            } else {
+                $image.cropper(_this.options);
+                _this.jc = $image.cropper('replace', _this.cropParams.old_url);
+            }
+
+        },
+        // 预览
+        picPreview: function(id, data){
+            this.previewData = data;
+            $.closePopup();
+            $("#previewBox").popup();
+        },
+        // 取消剪切
+        previewCancel: function () {
+            $.closePopup();
+            this.previewData = {};
+        },
+        // 图片大小
+        resetSizeImg: function (image, FitWidth, FitHeight) {
+            var newImg = image;
+
+            if (image.width > 0 && image.height > 0) {
+                if (image.width / image.height >= FitWidth / FitHeight) {
+                    if (image.width > FitWidth) {
+                        image.width = FitWidth;
+                        newImg.height = (image.height * FitWidth) / image.width;
+                    } else {
+                        newImg.width = image.width;
+                        newImg.height = image.height;
+                    }
+                } else {
+                    if (image.height > FitHeight) {
+                        newImg.height = FitHeight;
+                        newImg.width = (image.width * FitHeight) / image.height;
+                    } else {
+                        newImg.width = image.width;
+                        newImg.height = image.height;
+                    }
+                }
+            }
+            return newImg;
+        },
+        // 取消剪切
+        cropCancel: function () {
+            $.closePopup();
+            $("#previewBox").hide();
+            if (this.jc != false) {
+                $("body").css('overflowY','scroll');
+                $("#cropImg").cropper('destroy');
+                this.jc = null;
+                $("#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);
+            }
+        },
+        // 适应
+        cropSize: function(){
+            var _this = this;
+            var data = _this.cropParams.data;
+            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);
+            }
+
+            $("#cropImg").cropper(_this.options);
+            $("#cropImg").cropper('setData', {
+                width: iWidth,
+                height: iHeight
+            });
+        },
+        // 确定剪切
+        cropConfirm: function () {
+            var _this = this;
+            $("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 = {};
+                            $("#cropImg").cropper('destroy');
+                            _this.jc = null;
+                            $("#cropImg").remove();
+                        }, 200);
+                    }else{
+                        $.closePopup();
+                        _this.cropParams = {};
+                        $.hideLoading();
+                        $.showLoading('图片处理失败，请重新上传');
+                        setTimeout(function(){
+                            $.hideLoading();
+                        }, 1000);
+                    }
+                }, "image/jpeg");
+
+            }
+
+        },
+        // 重新剪切
+        cropReset: function () {
+            $image = $("#cropImg");
+            $image.cropper(this.options);
+            this.jc = $image.cropper('replace', this.cropParams.old_url);
+        },
+        // 旋转图片处理
+        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 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);
+                }*/
+            }
+
+        }
+    }
+});

public/static/weixin/js/photo.js

@@ -501,11 +501,11 @@ var app = new Vue({
                 wheelZoomRatio: 0.1,
                 responsive: true,
                 guides: false,
-                // strict: false,
+                strict: false,
                 width: iWidth,
-                // dragMode: 'move',
+                dragMode: 'move',
                 height: iHeight,
-                // autoCropArea: 1,
+                autoCropArea: 1,
                 // cropBoxMovable: false,
                 // cropBoxResizable: false,
                 minContainerWidth: iWidth,
@@ -513,8 +513,8 @@ var app = new Vue({
                 minCropBoxWidth: 80,
                 maxCropBoxWidth: iWidth,
                 minCropBoxHeight: 80,
-                // canvasWeight: cropWidth,
-                // canvasHeight: iHeight,
+                canvasWeight: cropWidth,
+                canvasHeight: iHeight,
                 // minCanvasWeight: cropWidth*0.4,
                 maxCanvasWeight: cropWidth,
                 minCanvasHeight: iHeight,
@@ -541,9 +541,17 @@ var app = new Vue({
             if (_this.jc != null) {
                 $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
+                });
             }
 
         },