ios 图片旋转问题

Posted 2020-12-15 明媚下雨天

 

问题

在移动端拍照并上传，在某些ios上会进行以西旋转，获取的图片源码，也是旋转过的，导致获取图片后，绘制图片出现问题。

要求

现要求全部统一图片为 树立形式。

原理：

1.在获取源码之前，要判断一下 是否为ios手机

2.旋转图片，旋转角度为多少

3.将图片重回绘制为正常树立图片

4.获取源码上传

 插件：

　　exif-js

介绍：http://code.ciaoca.com/javascript/exif-js/

1.判断是ios还是安卓

  //判断手机类型安卓/ios

    function isandroid_ios() {

        var u = navigator.userAgent, app = navigator.appVersion;

        var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1; //android终端或者uc浏览器 

        var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 

        return isAndroid == true ? true : false;

    }

2.获取拍摄得照片是否旋转，角度为多少

 //旋转图片操作
    function rotateImage(image) {

        var width = image.width;

        var height = image.height;

        var canvas = document.createElement("canvas")

        var ctx = canvas.getContext(‘2d‘);

        var newImage = new Image();

        EXIF.getData(image, function () {

            var orientation = EXIF.getTag(this, ‘Orientation‘);
         
            switch (orientation) {

                //正常状态

                case 1:

                    console.log(‘旋转0°‘);
                
                    break;

                //旋转90度

                case 6:

                    console.log(‘旋转90°‘);

                    canvas.height = width;

                    canvas.width = height;

                    ctx.rotate(Math.PI / 2);

                    ctx.translate(0, -height);

                    ctx.drawImage(image, 0, 0);

                    imageDate = canvas.toDataURL(‘Image/jpeg‘, 1)

                    newImage.src = imageDate;

                    break;

                //旋转180°

                case 3:

                    console.log(‘旋转180°‘);

                    canvas.height = height;

                    canvas.width = width;

                    ctx.rotate(Math.PI);

                    ctx.translate(-width, -height);

                    ctx.drawImage(image, 0, 0);

                    imageDate = canvas.toDataURL(‘Image/jpeg‘, 1)

                    newImage.src = imageDate;

                    break;

                //旋转270°

                case 8:

                    console.log(‘旋转270°‘);

                    canvas.height = width;

                    canvas.width = height;

                    ctx.rotate(-Math.PI / 2);

                    ctx.translate(-height, 0);

                    ctx.drawImage(image, 0, 0);

                    imageDate = canvas.toDataURL(‘Image/jpeg‘, 1)

                    newImage.src = imageDate;

                    break;

                //undefined时不旋转

                case undefined:

                    console.log(‘undefined  不旋转‘);
             
                    break;

            }

        });

        return newImage;

    }

View Code

完整代码

    //判断手机类型安卓/ios

    function isAndroid_ios() {

        var u = navigator.userAgent, app = navigator.appVersion;

        var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1; //android终端或者uc浏览器 

        var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 

        return isAndroid == true ? true : false;

    }


    //获取 处理图片
    $("#file").change(function (e) {
        var file = this.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            // console.log(this.result);
            // $(‘.person-img‘).attr(‘src‘, this.result);
            var result = this.result;
            $(".dialog").show();
            var img = new Image();
            img.src = result;

            img.onload = function () {
                if (!isAndroid_ios()) {
                    //如果是旋转得图片，将图片重新赋值
                    img = rotateImage(img);
                }
                 //处理 上传图片
                 upload(img)
    
            }
        }
    });

  
    //旋转图片操作
    function rotateImage(image) {

        //console.log(‘rotateImage‘);

        var width = image.width;

        var height = image.height;

        var canvas = document.createElement("canvas")

        var ctx = canvas.getContext(‘2d‘);

        var newImage = new Image();

        EXIF.getData(image, function () {

            var orientation = EXIF.getTag(this, ‘Orientation‘);
            alert(orientation)
            switch (orientation) {

                //正常状态

                case 1:

                    console.log(‘旋转0°‘);

                    break;

                //旋转90度

                case 6:

                    console.log(‘旋转90°‘);

                    canvas.height = width;

                    canvas.width = height;

                    ctx.rotate(Math.PI / 2);

                    ctx.translate(0, -height);

                    ctx.drawImage(image, 0, 0);

                    imageDate = canvas.toDataURL(‘Image/jpeg‘, 1)

                    newImage.src = imageDate;

                    break;

                //旋转180°

                case 3:

                    console.log(‘旋转180°‘);

                    canvas.height = height;

                    canvas.width = width;

                    ctx.rotate(Math.PI);

                    ctx.translate(-width, -height);

                    ctx.drawImage(image, 0, 0);

                    imageDate = canvas.toDataURL(‘Image/jpeg‘, 1)

                    newImage.src = imageDate;

                    break;

                //旋转270°

                case 8:

                    console.log(‘旋转270°‘);

                    canvas.height = width;

                    canvas.width = height;

                    ctx.rotate(-Math.PI / 2);

                    ctx.translate(-height, 0);

                    ctx.drawImage(image, 0, 0);

                    imageDate = canvas.toDataURL(‘Image/jpeg‘, 1)

                    newImage.src = imageDate;

                    break;

                //undefined时不旋转

                case undefined:

                    console.log(‘undefined  不旋转‘);

                    break;

            }

        });

        return newImage;

    }                        

View Code