wesmiler

public/static/weixin/js/papers.js

@@ -458,29 +458,18 @@ var app = new Vue({
                 // maxCropBoxHeight: imgHeight,
                 preview: '.preview_' + id,
                 crop: function (data) {
-                    var cropData = {
+                    /*var cropData = {
                         x: Math.round(data.x),
                         y: Math.round(data.y),
                         height: Math.round(data.height),
                         width: Math.round(data.width),
                         rotate: Math.round(data.rotate),
-                    };
-                    var canvas = $image.cropper('getCroppedCanvas', {width: imgWidth*20, height: imgHeight*20, rotate: data.rotate, imageSmoothingQuality: 'high'});
-                    var url = canvas.toBlob(function(e){
-                        //console.log(e);  //生成Blob的图片格式
-                        var timestamp = Date.parse(new Date());
-                        e.name=timestamp+".png";
-                        url = URL.createObjectURL(e);
-                        _this.picList[id].url = url;
-                        _this.picList[id].preview = url;
-                    },"image/jpeg");
-//                     var url = canvas.toDataURL("image/jpeg", 1);
-// console.log(url)
-//                     _this.picList[id].url = url;
-//                     _this.picList[id].preview = url;
-                    // _this.picList[id].url = canvas.toBlob("image/jpeg", 1);
-                    // _this.picList[id].preview = canvas.toBlob("image/jpeg", 1);
-                    _this.picList[id].cropData = cropData;
+                    };*/
+
+
+                    _this.cropParams.id = id;
+                    _this.cropParams.cropData = {width: imgWidth*20, height: imgHeight*20, rotate: data.rotate, imageSmoothingQuality: 'high'};
+                    // _this.picList[id].cropData = cropData;
                 }
             }
 
@@ -528,12 +517,25 @@ var app = new Vue({
             $("#previewBox").hide();
             if (this.jc != null) {
                 $.showLoading('图片处理中...');
-                setTimeout(function(){
-                    $.hideLoading();
-                    $("#cropImg").cropper('destroy');
-                    _this.jc = null;
-                    $("#cropImg").remove();
-                }, 300)
+                $image = $("#cropImg");
+                var canvas = $image.cropper('getCroppedCanvas', _this.cropParams.cropData);
+                var url = canvas.toBlob(function(e){
+                    //console.log(e);  //生成Blob的图片格式
+                    var timestamp = Date.parse(new Date());
+                    e.name=timestamp+".png";
+                    url = URL.createObjectURL(e);
+                    _this.picList[id].url = url;
+                    _this.picList[id].preview = url;
+
+                    setTimeout(function(){
+                        $.hideLoading();
+                        $("#cropImg").cropper('destroy');
+                        _this.jc = null;
+                        $("#cropImg").remove();
+                    }, 300)
+
+                },"image/jpeg");
+
             }
         },
         // 选择图片

public/static/weixin/js/photo.js

@@ -103,16 +103,22 @@ var app = new Vue({
                 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 id = $(this).attr('data-id');
-
+                var picId = $(this).attr('data-id');
+                var fileData = typeof(_this.picList[k]) != 'undefined' ? _this.picList[k] : '';
                 // var canvas = document.createElement("canvas");
                 var scale = 12;
                 var opts = {
@@ -122,71 +128,71 @@ var app = new Vue({
                     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);
-                        formData.append('image[]', file);
-                        formData.append('nums[]', num);
-                        formData.append('ids[]', id);
-                        formData.append('colors[]', colorType);
-                        count++;
+                // 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[]', id);
+                    formData.append('colors[]', colorType);
+                }
 
-                        if (total <= (k + 1)) {
-                            if (count <= 0) {
-                                $.toast('请选择打印的图片');
-                                return false;
-                            }
-                            _this.submitting = true;
+                count++;
+            });
 
-                            // 上传
-                            $.showLoading('文件上传处理中...');
-                            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();
-                                    }
-                                }
-                            })
+            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 () {
@@ -419,6 +425,10 @@ var app = new Vue({
             }
             return new File([u8arr], filename, {type: mime});
         },
+        // base转文件
+        dataBlobtoFile: function (dataurl, filename) {//将base64转换为文件
+            return new File([u8arr], filename, {type: 'image/jpeg'});
+        },
         // 删除图片
         picDel: function (id) {
             var fileId = $("#pic_" + id).attr('data-id');
@@ -468,16 +478,35 @@ var app = new Vue({
 
             $("#cropBox").popup();
             var options = {
-                aspectRatio: rate,
+                aspectRatio: 0,
                 center: true,
-                zoomOnTouch: false,
+                movable: true,
+                zoomable: true,
+                zoomOnTouch: true,
                 zoomOnWheel: false,
-                scalable: false,
-                touchDragZoom: false,
-                responsive: false,
-                // autoCropArea: 0.8,
-                minCropBoxWidth: 80,
-                minCropBoxHeight: 80,
+                scalable: true,
+                // cropBoxMovable: false,
+                wheelZoomRatio: 0.1,
+                background: false,
+                responsive: true,
+                guides: false,
+                strict: false,
+                width: width,
+                dragMode: 'move',
+                height: height,
+                autoCropArea: 0,
+                cropBoxMovable: false,
+                cropBoxResizable: false,
+                minContainerWidth: iWidth,
+                minContainerHeight: iHeight,
+                minCropBoxWidth: iWidth,
+                maxCropBoxWidth: iWidth,
+                minCropBoxHeight: iHeight,
+                maxCropBoxHeight: iHeight,
+                minCanvasWeight: iWidth,
+                maxCanvasWeight: iWidth,
+                minCanvasHeight: iHeight,
+                maxCanvasHeight: iHeight,
                 // preview: '.preview-img',
                 viewMode: 1,
                 crop: function (data) {
@@ -489,22 +518,7 @@ var app = new Vue({
                         rotate: Math.round(data.rotate),
                     };
 
-                    var canvas = $image.cropper('getCroppedCanvas', {
-                        width: data.height * 15,
-                        height: data.width * 15,
-                        rotate: data.rotate
-                    });
-                    var url = canvas.toBlob(function (e) {
-                        console.log(e);  //生成Blob的图片格式
-                        if(e != null){
-                            var timestamp = Date.parse(new Date());
-                            e.name = timestamp + ".png";
-                            url = URL.createObjectURL(e);
-                            _this.picList[id].url = url;
-                            _this.picList[id].preview = url;
-                            _this.cropParams.preview = url;
-                        }
-                    }, "image/jpeg");
+
                     /*      _this.picList[id].preview = canvas.toDataURL("image/jpeg", 1);
                           _this.cropParams.preview = canvas.toDataURL("image/jpeg", 1);*/
                     _this.cropParams.cropData = cropData;
@@ -572,6 +586,7 @@ var app = new Vue({
         },
         // 确定剪切
         cropConfirm: function () {
+            var _this = this;
             $.closePopup();
             $("#previewBox").hide();
             $(".crop-img").show();
@@ -579,12 +594,31 @@ var app = new Vue({
             this.cropPreviewStatus = false;
             if (this.jc != null) {
                 $.showLoading('图片处理中...');
-                setTimeout(function() {
-                    $.hideLoading();
-                    $("#cropImg").cropper('destroy');
-                    this.jc = null;
-                    $("#cropImg").remove();
-                }, 200);
+                var canvas = $image.cropper('getCroppedCanvas', {
+                    width: data.height * 15,
+                    height: data.width * 15,
+                    rotate: data.rotate
+                });
+                var url = canvas.toBlob(function (e) {
+                    console.log(e);  //生成Blob的图片格式
+                    if (e != null) {
+                        var timestamp = Date.parse(new Date());
+                        e.name = timestamp + ".png";
+                        url = URL.createObjectURL(e);
+                        _this.picList[id].url = url;
+                        _this.picList[id].preview = url;
+                        _this.picList[id].fileData = _this.dataBlobtoFile(e, e.name);
+                        _this.cropParams.preview = url;
+
+                        setTimeout(function () {
+                            $.hideLoading();
+                            $("#cropImg").cropper('destroy');
+                            this.jc = null;
+                            $("#cropImg").remove();
+                        }, 200);
+                    }
+                }, "image/jpeg");
+
             }
 
         },

public/themes/default/weixin/print/photo.html

@@ -58,7 +58,6 @@
                 <div class="crop-actions">
                     <a id="rotateConfirm" v-if="!cropPreviewStatus" class="weui-btn weui-btn_default weui-btn_pink" @click="rotateConfirm()">旋转</a>
                     <a id="clipConfirm" v-if="cropPreviewStatus" class="weui-btn weui-btn_default weui-btn_pink" @click="cropConfirm()">确定剪切</a>
-                    <a id="clipConfirm" v-else class="weui-btn weui-btn_default weui-btn_pink" @click="cropPreview()">预览剪切</a>
                     <a v-if="cropPreviewStatus" class="weui-btn weui-btn_default" @click="cropReset()">重新剪切</a>
                     <a v-else class="weui-btn weui-btn_default" @click="cropCancel()">取消</a>
                 </div>