Utilisez exfe.js et canvas pour résoudre le problème du retournement des images lors de la prise de photos et de leur téléchargement sur mobile IOS (avec code)

Le contenu de cet article concerne l'utilisation d'exfe.js et de canvas pour résoudre le problème du retournement des photos lors de la prise de photos et du téléchargement de photos sur un mobile IOS. J'espère qu'il a une certaine valeur de référence. vous sera utile.

Je me souviens que j'ai rejoint le front-end il y a presque un an. La société a créé une webapp avec la fonction de téléchargement d'avatars. Je n'étais pas en charge de ce projet à l'époque. J'ai découvert que lorsque les utilisateurs d'Apple prenaient des photos et téléchargeaient des avatars, ils retournaient plusieurs front-end. Mon camarade de classe a passé tout l'après-midi à essayer de résoudre le problème, mais le problème m'a été transféré et j'ai eu une demi-heure pour le faire. sortir du travail. J'étais également confus à ce moment-là, et la première chose qui m'est venue à l'esprit a été : comment puis-je savoir si cela s'est inversé ? Il n'y a aucun problème avec Android, et il n'y a aucun problème avec certaines photos de l'album des téléphones mobiles Apple. Est-ce que js peut avoir cette fonction pour juger ? J'ai vérifié les informations en ligne et bien sûr, il y en a ! C'est exfe.js. J'ai continué à étudier. A ce moment-là, la sœur chef d'équipe avait déjà acheté le dîner, et le patron est également venu présenter ses condoléances. Finalement, il était environ 9 heures du soir, et c'était enfin le cas. résolu.

Après deux ans, j'ai de nouveau rencontré ce problème hier. J'ai quitté ma dernière entreprise depuis un an et demi. L'entreprise actuelle organise un événement Halloween, qui implique également de télécharger des photos et de synthétiser des visages fantômes. a été fait il y a deux jours. Je l'ai envoyé au chef de projet (nous sommes distants ici et avons quelques développeurs). Alors que j'étais sur le point de quitter le travail le soir, le chef de projet a envoyé un message : "Retournez l'image iOS, répare-le, je dois me connecter ce soir et je ferai des heures supplémentaires. " J'étais inquiet. Les chevaux d'herbe et de boue galopaient. Premièrement, j'ai oublié qu'iOS a ce problème. Deuxièmement, il vous a été envoyé depuis 2 jours . Alors que tu étais sur le point de quitter le travail, tu m'as dit qu'il y avait un problème et que tu devais faire des heures supplémentaires ! Je dois annuler mes projets pour la soirée ! Toujours gratuit ! Il n'y a pas eu de repas de consolation et il n'y a eu aucune excuse. J'étais toujours prêt à faire des heures supplémentaires et j'ai répondu avec un sourire ironique : « D'accord, je le testerai à l'avance la prochaine fois. , et cela a été traité plus rapidement, et cela a été fait après 7 heures. Les problèmes de déploiement ultérieurs ne sont plus mon problème. Il est presque 9 heures.

C'est juste une scène presque similaire, juste un soupir.

Téléchargez le code

partie HTML

<input type="file" accept="image/*" id="uploadImage" capture="camera" onchange="selectFileImage(this);" />
<img alt="preview" src="" id="myImage"/>

exfe.js pour lire les informations sur l'image Il y a beaucoup d'informations dans l'image que nous avons téléchargée

<.>

//获取照片方向角属性，用户旋转控制
EXIF.getData(file, function() {
    EXIF.getAllTags(this);
    Orientation = EXIF.getTag(this, 'Orientation');
    console.log(Orientation);
});

Les valeurs d'Orientation sont 1, 3, 6, 8, etc., qui représentent respectivement 0°, 180°, 90° dans le sens des aiguilles d'une montre, et 90° dans le sens inverse des aiguilles d'une montre

Quand on connaît le angle de rotation de l'image, nous pouvons utiliser Canvas pour les traiter, et enfin obtenir les résultats souhaités. Voici un extrait d'un morceau de code provenant d'Internet. S'il existe des fonctions spéciales, vous devez alors écrire vous-même une logique. c'est-à-dire juger l'angle, juger le système d'exploitation, puis utiliser Le canevas est redessiné, base64 est généré et enfin le DOM est utilisé pour afficher l'image.

Téléchargez le code

function selectFileImage(fileObj) {
        var file = fileObj.files['0'];
        //图片方向角 
        var Orientation = null;
        if (file) {
            //获取照片方向角属性，用户旋转控制
            EXIF.getData(file, function() {
                EXIF.getAllTags(this);
                Orientation = EXIF.getTag(this, 'Orientation');
                console.log(Orientation)
            });
            var oReader = new FileReader();
            oReader.onload = function(e) {
                var image = new Image();
                image.src = e.target.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)) {
                        console.log('iphone');
                        //如果方向角不为1，都需要进行旋转 
                        if(Orientation != "" && Orientation != 1){
                            alert('旋转处理');
                            switch(Orientation){
                                case 6://需要顺时针（向左）90度旋转
                                    rotateImg(this,'left',canvas);
                                    break;
                                case 8://需要逆时针（向右）90度旋转
                                    rotateImg(this,'right',canvas);
                                    break;
                                case 3://需要180度旋转
                                    rotateImg(this,'right',canvas);//转两次
                                    rotateImg(this,'right',canvas);
                                    break;
                            }
                        }
                        base64 = canvas.toDataURL("image/jpeg", 1);
                    }else if (navigator.userAgent.match(/Android/i)) {// 修复android
                        var encoder = new JPEGEncoder();
                        base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);
                    }else{
                        if(Orientation != "" && Orientation != 1){
                            switch(Orientation){
                                case 6://需要顺时针（向左）90度旋转
                                    rotateImg(this,'left',canvas);
                                    break;
                                case 8://需要逆时针（向右）90度旋转
                                    rotateImg(this,'right',canvas);
                                    break;
                                case 3://需要180度旋转
                                    rotateImg(this,'right',canvas);//转两次
                                    rotateImg(this,'right',canvas);
                                    break;
                            }
                        }

                        base64 = canvas.toDataURL("image/jpeg", 1);
                    }
                    $("#myImage").attr("src", base64);
                };
            };
            oReader.readAsDataURL(file);
        }
    }

    //对图片旋转处理 
    function rotateImg(img, direction,canvas) {
        //最小与最大旋转方向，图片旋转4次后回到原方向
        var min_step = 0;
        var max_step = 3;
        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);
        }
        //旋转角度以弧度值为参数
        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;
        }
    }

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!