Wex5 cropper插件在iphone的app上，截图有问题

liupeng9030

参照内置的案例，使用cropper插件截取图片，生成android的app可以直接截取图片并上传，但是生成的iphone的app，在获取到图片后上传时总是出现问题，要么自动旋转了，要么根本截取的不是我选区的图片，怎么解决？

liangyongfei

cropper 插件是 你自己做的吗？？
平台好像没见过这个插件！
http://doc.wex5.com/cordova-plugins/

截图有案例的
/UI2/demo/picCut/index.w

liupeng9030

liangyongfei 发表于 2017-6-9 18:09
cropper 插件是 你自己做的吗？？
平台好像没见过这个插件！
http://doc.wex5.com/cordova-plugins/

就是参照那个cutpic项目的，里面用的cropper.js，我的代码几乎和那边写的一样，pc和安卓app都行，就是生成的iphone的app不行。一开始怀疑我写错了，后来我直接将自带的cutpic的例子生成了app，在iphone上自然不行，求解决……

liupeng9030

liangyongfei 发表于 2017-6-9 18:09
cropper 插件是 你自己做的吗？？
平台好像没见过这个插件！
http://doc.wex5.com/cordova-plugins/

刚说错了，是picCut案例，就是刚刚你给出的那个地址，不是cutpic。我就把自带的案例生成app安装在iphone上，还是那样，截取出来的图片要么旋转了，要么根本不是我选区内的图片

liangyongfei

liupeng9030 发表于 2017-6-10 09:01
刚说错了，是picCut案例，就是刚刚你给出的那个地址，不是cutpic。我就把自带的案例生成app安装在iphone ...

1.先试试 mac 电脑的 safari 浏览器访问是否正常
2.同一台ios手机 系统自带的浏览器访问是否正常？

如果都是正常的？？
再试试其他版本的iphone 手机是否正常？
直接appLoader运行就可以！

如果只有某个手机运行案例不正常！麻烦你把手机的型号和版本发布！本地需要重现一下才能想办法解决

上面的问题测试过以后！麻烦你能回复一下帖子！说清楚，谢谢！

liupeng9030

liangyongfei 发表于 2017-6-12 09:49
1.先试试 mac 电脑的 safari 浏览器访问是否正常
2.同一台ios手机 系统自带的浏览器访问是否正常？

mac的safari浏览器，正常；
同一台ios手机，系统自带的浏览器（safari）不正常，截出的图是旋转的且偏移的；
另一台ios手机，生成的app及自带的浏览器都不正常，效果和上面一样；

第一台ios手机是iphone 6s，系统版本是9.2；
另一台ios手机是iphone 5s，系统版本：……（手机不在身旁）

liupeng9030

liangyongfei 发表于 2017-6-12 09:49
1.先试试 mac 电脑的 safari 浏览器访问是否正常
2.同一台ios手机 系统自带的浏览器访问是否正常？

最新消息，最新消息，
经过测试发现，app在iphone上，选取照片的时候，如果选得照片是竖着的，那么不正常，缩放什么的都有问题；如果是横过来排拍的照片，就没有任何问题。

问题原因找到了，求解决方案~~~

liangyongfei

liupeng9030 发表于 2017-6-13 15:26
最新消息，最新消息，
经过测试发现，app在iphone上，选取照片的时候，如果选得照片是竖着的，那么不正常 ...

你好楼主，这个问题需要我在本地环境进行问题重现，所以会花费较长时间，请你耐心等待，我完成后会第一时间反馈结果，谢谢！2017061300005

liupeng9030

liangyongfei 发表于 2017-6-13 16:17
你好楼主，这个问题需要我在本地环境进行问题重现，所以会花费较长时间，请你耐心等待，我完成后会第一时 ...

您好，截图的问题，解决了么？

liupeng9030

liangyongfei 发表于 2017-6-13 16:17
你好楼主，这个问题需要我在本地环境进行问题重现，所以会花费较长时间，请你耐心等待，我完成后会第一时 ...

这个问题，我解决了。主要还是图片的旋转状态的问题，iphone下拍出来的照片的旋转状态为8或6或3或1。1是正常的、未旋转，3为旋转180度，6为逆时针旋转了90度，8为顺时针旋转了90度。所以在最后截图时，根据图片的旋转状态，将原始图片在canvas上绘制时旋转过来就行了。接下来就是获取base64格式字符串，提交到后台。

1.加入exif.js，用于判断图片的旋转状态（http://download.csdn.net/download/wu858773457/9305057）

2.在页面中加入如下方法：
//获取照片的元信息（拍摄方向）
Model.prototype.getPhotoOrientation = function(img, callback) {
        var orient;
        EXIF.getData(img, function() {
                orient = EXIF.getTag(this, 'Orientation');
                callback(orient);
        });
}

/*
* 将根据图片和裁剪的区域，进行截图，并转换为base64格式
* -------------------------------------
* @url         {string}    图片地址
* @canvasdata  {object}    画布（图片）对象数据
* @cropdata    {object}    裁剪区域对象数据
* @callback    {function}  回调函数
*/
Model.prototype.convertToData = function(url, canvasdata, cropdata, callback) {
        var self = this;
        var imgw = canvasdata.width; // 图片缩放或则放大后的宽
        var imgh = canvasdata.height; // 图片缩放或则放大后的高  
               
        var cropw = cropdata.width; // 剪切的宽  
        var croph = cropdata.height; // 剪切的高

        var poleft = canvasdata.left - cropdata.left; // canvas定位图片的左边位置  
        var potop = canvasdata.top - cropdata.top; // canvas定位图片的上边位置  
               
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext('2d');
               
        canvas.width = cropw;
        canvas.height = croph;
               
        var img = new Image();
        img.onload = function() {
                this.width = imgw;
                this.height = imgh;
                        
                //获取照片的拍摄方向
                self.getPhotoOrientation(img, function(orient) {
                        //判断图片拍摄方向是否顺时针旋转了90度
                        if (orient == 8) {
                                ctx.save();//保存状态
                                ctx.translate(cropw / 2, croph / 2);//设置画布上的(0,0)位置，也就是旋转的中心点
                                ctx.rotate(-90 * Math.PI / 180);//把画布旋转90度
                                ctx.translate(-cropw / 2, -croph / 2);
                                var _x = -(imgh - (-potop) - croph);
                                var _y = poleft;
                                       
                                // 执行Canvas的drawImage语句
                                ctx.drawImage(img, _x, _y, imgh, imgw);//把图片绘制在画布translate之前的中心点，
                                ctx.restore();//恢复状态
                        }
                        //判断图片拍摄方向是否逆时针旋转了90度
                        else if (orient == 6) {
                                ctx.save();//保存状态
                                ctx.translate(cropw / 2, croph / 2);//设置画布上的(0,0)位置，也就是旋转的中心点
                                ctx.rotate(90 * Math.PI / 180);//把画布旋转90度
                                ctx.translate(-cropw / 2, -croph / 2);
                                var _x = potop;
                                var _y = -(imgw - (-poleft) - cropw);
                                       
                                // 执行Canvas的drawImage语句
                                ctx.drawImage(img, _x, _y, imgh, imgw);//把图片绘制在画布translate之前的中心点，
                                ctx.restore();//恢复状态
                        }
            //判断图片是否旋转了180度
                        else if(orient == 3){
                                ctx.save();//保存状态
                                ctx.translate(cropw / 2, croph / 2);//设置画布上的(0,0)位置，也就是旋转的中心点
                                ctx.rotate(180 * Math.PI / 180);//把画布旋转90度
                                ctx.translate(-cropw / 2, -croph / 2);
                                var _x = -(imgw - (-poleft) - cropw);
                                var _y = -(imgh - (-potop) - croph);

                                // 执行Canvas的drawImage语句
                                ctx.drawImage(img, _x, _y, imgw, imgh);//把图片绘制在画布translate之前的中心点，
                                ctx.restore();//恢复状态
                        }
                        else {
                                // 执行Canvas的drawImage语句
                                ctx.drawImage(img, poleft, potop, imgw, imgh);
                        }
                                
                        var base64 = canvas.toDataURL('image/jepg', 0.5);  
                        callback && callback(base64); // 回调base64字符串  
                });
        };
        img.src = url;
}


3. 注册保存按钮事件，将将demo中的.cropper("getCroppedCanvas");方法，换为上面的convertToData方法
/*
* 使用该头像（保存）
* -------------------------------------
*/
Model.prototype.btnOKClick = function(event) {
        var self = this;
        common.showLoading();
               
        //var canvas = $('.cropper-main > img').cropper("getCroppedCanvas");
        ////保存剪切后的图片
        //this.saveCutPic(canvas);
        //return;

        var $image = $('.cropper-main > img');
        var src = $('.cropper-main img:eq(1)').attr("src");
        //图片（画布）top、left、width、height
        var canvasdata = $image.cropper("getCanvasData");
        //裁剪区域的top、left、width、height
        var cropBoxData = $image.cropper('getCropBoxData');
               
        //var _scaleR = $('.cropper-main img:eq(1)').prop("naturalWidth") / canvasdata.width;
        var _scaleR = 600 / cropBoxData.width;
        canvasdata.width *= _scaleR;
        canvasdata.height *= _scaleR;
        cropBoxData.width *= _scaleR;
        cropBoxData.height *= _scaleR;
        cropBoxData.top = (cropBoxData.top - canvasdata.top) * _scaleR + canvasdata.top;
        cropBoxData.left = (cropBoxData.left - canvasdata.left) * _scaleR + canvasdata.left;
               
               
        self.convertToData(src, canvasdata, cropBoxData, function(base64Char) {
                self.saveCutPic(null, base64Char);
        });
};