Verwenden Sie exfe.js und Canvas, um das Problem des Spiegelns von Bildern beim Aufnehmen und Hochladen auf mobiles iOS zu lösen (mit Code).

Der Inhalt dieses Artikels befasst sich mit der Verwendung von exfe.js und Canvas zur Lösung des Problems des Umdrehens von Bildern beim Aufnehmen von Fotos und beim Hochladen von Bildern auf mobiles iOS. Ich hoffe, dass es einen gewissen Referenzwert hat wird Ihnen hilfreich sein.

Ich erinnere mich, dass ich vor fast einem Jahr zum ersten Mal eine Webanwendung mit der Funktion zum Hochladen von Avataren erstellt habe. Während des Tests war ich nicht verantwortlich Ich habe herausgefunden, dass Apple-Benutzer, wenn sie Fotos machten und Avatare hochluden, zu diesem Zeitpunkt mehrere Front-Ends umdrehten. Mein Klassenkamerad verbrachte den ganzen Nachmittag damit, das Problem zu lösen, aber das Problem wurde auf mich übertragen, und ich hatte eine halbe Stunde Zeit Ich war damals auch verwirrt, und das erste, was mir in den Sinn kam, war: Wie kann ich feststellen, ob es umgedreht ist? Es gibt kein Problem mit Android und es gibt kein Problem mit einigen Bildern im Album von Apple-Handys. Kann js diese Funktion beurteilen? Ich habe die Informationen online überprüft und tatsächlich gibt es sie! Das ist exfe.js. Zu diesem Zeitpunkt hatte die Schwester des Teamleiters bereits das Abendessen gekauft, und der Chef kam schließlich gegen 21 Uhr abends gelöst.

Nach zwei Jahren bin ich gestern wieder auf dieses Problem gestoßen. Ich habe meine letzte Firma für eineinhalb Jahre verlassen. Die aktuelle Firma führt auch das Hochladen von Bildern und das Synthetisieren von Geistergesichtern durch Ich habe es vor zwei Tagen an den Projektmanager gesendet (wir sind hier entfernt und haben ein paar Entwickler), als ich abends von der Arbeit gehen wollte, schickte der Projektmanager eine Nachricht: „Drehen Sie das iOS-Image um.“ Repariere es, ich muss heute Abend online gehen und werde Überstunden machen.“ . Als du gerade Feierabend machen wolltest, hast du mir erzählt, dass es ein Problem gäbe und du Überstunden machen müsstest! Ich muss meine Pläne für den Abend absagen! Noch frei! Es gab kein Trostessen und keine Entschuldigung. Ich war immer noch bereit, Überstunden zu machen, und antwortete mit einem schiefen Lächeln: „Okay, ich werde es das nächste Mal vorher testen.“ , und es wurde schneller abgewickelt, und es war nach 7 Uhr erledigt. Sollte es später zu Bereitstellungsproblemen kommen, ist das nicht mehr mein Problem. Es ist schon wieder fast 9 Uhr.

Es ist nur eine fast ähnliche Szene, nur ein Seufzen.

Laden Sie den Code

HTML-Teil

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

exfe.js hoch, um die Bildinformationen zu lesen. Das von uns hochgeladene Bild enthält viele Informationen

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

Ausrichtung Die Werte sind 1, 3, 6, 8 usw. und repräsentieren jeweils 0°, 180°, 90° im Uhrzeigersinn und 90° gegen den Uhrzeigersinn

Wenn wir den Drehwinkel des kennen Bild, wir können Canvas verwenden, um sie zu verarbeiten, und schließlich erhalten wir die gewünschten Ergebnisse. Hier ist ein Auszug aus einem Code aus dem Internet. Wenn es spezielle Funktionen gibt, müssen Sie selbst etwas Logik schreiben Winkel, beurteilen Sie das Betriebssystem und zeichnen Sie es dann mit Canvas neu. Generieren Sie base64 und bedienen Sie schließlich den Dom, um das Bild anzuzeigen.

Up-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;
        }
    }

Das obige ist der detaillierte Inhalt vonVerwenden Sie exfe.js und Canvas, um das Problem des Spiegelns von Bildern beim Aufnehmen und Hochladen auf mobiles iOS zu lösen (mit Code).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!