wesmiler

public/static/weixin/js/papers.js

@@ -490,6 +490,67 @@ var app = new Vue({
             }
 
         },
+        // 旋转图片处理
+        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;
+            }
+        },
         // 取消剪切
         cropCancel: function () {
             $.closePopup();
@@ -528,23 +589,36 @@ var app = new Vue({
                 $image = $("#cropImg");
                 var id = _this.cropParams.id;
                 var canvas = $image.cropper('getCroppedCanvas', _this.cropParams.cropData);
-                var url = canvas.toBlob(function(e){
+                var url = canvas.toDataURL('image/jpeg');
+                _this.picList[id].url = url;
+                _this.picList[id].preview = url;
+                // _this.picList[id].fileData = _this.dataURLtoFile(e, e.name);
+
+                setTimeout(function(){
+                    $.hideLoading();
+                    $("#cropImg").cropper('destroy');
+                    _this.jc = null;
+                    $("#cropImg").remove();
+                }, 300)
+                /*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;
-                    // _this.picList[id].fileData = _this.dataURLtoFile(e, e.name);
+                    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.dataURLtoFile(e, e.name);
 
-                    setTimeout(function(){
-                        $.hideLoading();
-                        $("#cropImg").cropper('destroy');
-                        _this.jc = null;
-                        $("#cropImg").remove();
-                    }, 300)
+                        setTimeout(function(){
+                            $.hideLoading();
+                            $("#cropImg").cropper('destroy');
+                            _this.jc = null;
+                            $("#cropImg").remove();
+                        }, 300)
+                    }
 
-                },"image/jpeg");
+                },"image/jpeg");*/
 
             }
         },
@@ -552,31 +626,112 @@ var app = new Vue({
         selectPic: function (ele, id) {
             var _this = this;
             var files = ele.target.files;
-            console.log(files);
             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: id,
-                                url: even.currentTarget.result,
-                                preview: even.currentTarget.result,
-                                blobUrl: blobUrl,
-                                name: file.name,
-                                file_size: file.size,
-                                file_type: file.type
-                            };
-                            _this.picList[id] = img;
-                            setTimeout(function(){
-                                _this.picEdit(id);
-                            }, 300)
+
+                            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 if (navigator.userAgent.match(/Android/i)) {// 修复android
+                                    var encoder = new JPEGEncoder();
+                                    base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);
+                                }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: id,
+                                    url: base64,
+                                    preview: base64,
+                                    blobUrl: blobUrl,
+                                    name: file.name,
+                                    file_size: file.size,
+                                    file_type: file.type
+                                };
+                                _this.picList[id] = img;
+                                setTimeout(function(){
+                                    _this.picEdit(id);
+                                }, 300)
+                            }
                         }
                     }
                 })
-                _this.getFileList(0);
             }
 
         }

public/static/weixin/js/photo.js

@@ -737,6 +737,67 @@ var app = new Vue({
             $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;
@@ -745,26 +806,108 @@ var app = new Vue({
             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,
-                                old_url: even.currentTarget.result,
-                                // url: even.currentTarget.result,
-                                preview: even.currentTarget.result,
-                                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);
+                            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 if (navigator.userAgent.match(/Android/i)) {// 修复android
+                                    var encoder = new JPEGEncoder();
+                                    base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);
+                                }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);
+                            }
                         }
                     }
                 })

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

@@ -100,5 +100,6 @@
 <script src="/static/weixin/lib/jcrop/html2canvas.min.js?v={$version}"></script>
 <script src="/static/weixin/lib/cropper/cropper.js?v={$version}"></script>
 <script src="/static/weixin/js/jweixin-1.4.0.js?v={$version}"></script>
+<script src="/static/weixin/js/exif.js?v={$version}"></script>
 <script src="/static/weixin/js/papers.js?v={$version}"></script>
 <include file="weixin@block:footer"/>

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

@@ -116,5 +116,6 @@
 <script src="/static/weixin/lib/jcrop/html2canvas.min.js?v={$version}"></script>
 <script src="/static/weixin/lib/cropper/cropper.js?v={$version}"></script>
 <script src="/static/weixin/js/jweixin-1.4.0.js?v={$version}"></script>
+<script src="/static/weixin/js/exif.js?v={$version}"></script>
 <script src="/static/weixin/js/photo.js?v={$version}"></script>
 <include file="weixin@block:footer"/>