Lösung für das Hochladen, Drehen und Komprimieren mobiler Bilder

Vorwort

Wenn Sie Fotos aufnehmen und Bilder über das Eingabe-Tag der Webseite auf Ihrem Mobiltelefon hochladen, besteht bei einigen Mobiltelefonen das Problem, dass das Bild um 90 Grad gedreht wird, darunter iPhone und bestimmte Samsung Mobiltelefone. Dieses Problem tritt nur auf, wenn diese Telefone im Hochformat aufgenommen werden und horizontal aufgenommene Fotos normal angezeigt werden. Daher können Sie dieses Problem lösen, indem Sie den Kamerawinkel Ihres Telefons so einstellen, dass das Foto gedreht wird.

Ausrichtung

Dieser Parameter ist nicht in allen Bildern verfügbar, aber mit Mobiltelefonen aufgenommene Bilder verfügen über diesen Parameter.

旋转角度	参数值
0°	1
顺时针90°	6
逆时针90°	8
180°	3

Die Anzeige ist normal, wenn der Parameter 1 ist, dann ist die Anzeige für diese horizontalen Aufnahmen normal, d. h. auf einem Mobiltelefon mit Ausrichtung = 1 ist der Parameter für vertikale Aufnahmen 6.

Um den Orientierungsparameter zu erhalten, können Sie ihn über die exif.js-Bibliothek bedienen. exif.js hat viele Funktionen und ist auch sehr groß. Es ist 30 KB groß, bevor es unkomprimiert wird, was einen großen Einfluss auf das Laden mobiler Seiten hat. Und ich brauche nur die Orientierungsinformationen, also habe ich etwas Code aus der exif.js-Bibliothek gelöscht und den Code auf ein paar KB reduziert.

exif.js erhält Orientierung:

EXIF.getData(file, function() {  var Orientation = EXIF.getTag(this, 'Orientation');});

Datei ist die vom Eingabedateiformular hochgeladene Datei. Die hochgeladene Datei kann über fileReader.readAsDataURL(file) in der Vorschau angezeigt werden. Wenn Sie sich darüber nicht im Klaren sind, können Sie Folgendes überprüfen: HTML5 Advanced Series: Datei-Upload und -Download

Rotation

Rotation ist erforderlich Rotate()-Methode von Canvas.

ctx.rotate(angle);

Der Parameter der Rotationsmethode ist der Rotationsbogen. Der Winkel muss in Bogenmaß umgerechnet werden: Grad * Math.PI / 180

Der Mittelpunkt der Drehung liegt standardmäßig am Startpunkt der Leinwand, also (0, 0). Das Prinzip der Drehung ist wie folgt:

Wenn Sie nach der Drehung drawImage() vom Punkt (0, 0) aus ausführen, wird die gezeichnete Position um 90 gedreht linkes Bild Die Position dahinter liegt nicht im sichtbaren Bereich. Nach der Drehung dreht sich auch die Koordinatenachse. Wenn Sie sie im sichtbaren Bereich anzeigen möchten, müssen Sie den (0, 0)-Punkt um y-Einheiten in die entgegengesetzte Richtung der y-Achse verschieben ist (0, -y).

In ähnlicher Weise ist der Startpunkt nach der Drehung um -90 Grad (-x, 0) und der Startpunkt nach der Drehung um 180 Grad ist (-x, -y).

Komprimierung

Mit Mobiltelefonen aufgenommene Fotos sind zu groß und die mit Base64 codierten Fotos sind größer als die Originalfotos. Daher ist es unbedingt erforderlich, sie beim Hochladen zu komprimieren. Heutige Mobiltelefone haben so hohe Pixel, und die Breite und Höhe der aufgenommenen Fotos beträgt mehrere tausend Pixel. Die Verwendung von Canvas zum Rendern der Fotos ist relativ langsam.

Daher besteht der erste Schritt darin, die Breite und Höhe des hochgeladenen Fotos zu begrenzen, festzustellen, ob die Breite oder Höhe einen bestimmten Bereich überschreitet, und dann Breite und Höhe gleichmäßig zu komprimieren.

var ratio = width / height;if(imgWidth > imgHeight && imgWidth > xx){imgWidth = xx;imgHeight = Math.ceil(xx / ratio);}else if(imgWidth < imgHeight && imgHeight > yy){imgWidth = Math.ceil(yy * ratio);imgHeight = yy;}

Der zweite Schritt besteht darin, die Fotoqualität durch die Methode canvas.toDataURL() zu komprimieren. Die Methode

canvas.toDataURL("image/jpeg", 1);

toDataURL() gibt einen Daten-URI zurück, der die Bildanzeige enthält. Verwenden Sie zwei Parameter, der erste Parameter ist das Bildformat, der Standardwert ist image/png. Der zweite Parameter ist die Komprimierungsqualität. Wenn das angegebene Bildformat image/jpeg oder image/webp ist, können Sie die Bildqualität zwischen 0 und 1 auswählen.

Zusammenfassung

Basierend auf dem oben Gesagten enthält der Beispielcode die vereinfachte exif.js-Bibliotheksadresse: file-demo

Der Hauptkerncode lautet wie folgt:

<input type="file" id="files" ><img  src="blank.gif" id="preview" alt="Lösung für das Hochladen, Drehen und Komprimieren mobiler Bilder" >
<script src="small-exif.js?1.1.11"></script><script>var ipt = document.getElementById(&#39;files&#39;),img = document.getElementById(&#39;preview&#39;),Orientation = null;ipt.onchange = function () {var file = ipt.files[0],reader = new FileReader(),image = new Image();if(file){EXIF.getData(file, function() {  
            Orientation = EXIF.getTag(this, &#39;Orientation&#39;);});
            reader.onload = function (ev) {image.src = ev.target.result;
            image.onload = function () {var imgWidth = this.width,imgHeight = this.height;
            // 控制上传图片的宽高if(imgWidth > imgHeight && imgWidth > 750){imgWidth = 750;
            imgHeight = Math.ceil(750 * this.height / this.width);
            }else if(imgWidth < imgHeight && imgHeight > 1334){imgWidth = Math.ceil(1334 * this.width / this.height);
            imgHeight = 1334;
            }var canvas = document.createElement("canvas"),ctx = canvas.getContext(&#39;2d&#39;);
            canvas.width = imgWidth;canvas.height = imgHeight;
            if(Orientation && Orientation != 1){switch(Orientation){case 6:     
            // 旋转90度canvas.width = imgHeight;    canvas.height = imgWidth;    
            ctx.rotate(Math.PI / 2);
            // (0,-imgHeight) 从Lösung für das Hochladen, Drehen und Komprimieren mobiler Bilder那里获得的起始点ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
            break;case 3:     // 旋转180度ctx.rotate(Math.PI);    
            ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);break;case 8:     
            // 旋转-90度canvas.width = imgHeight;    canvas.height = imgWidth;    ctx.rotate(3 * Math.PI / 2);    
            ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);break;
            }}else{ctx.drawImage(this, 0, 0, imgWidth, imgHeight);}img.src = canvas.toDataURL("image/jpeg", 0.8);
            }}reader.readAsDataURL(file);
            }}</script>

Das obige ist der detaillierte Inhalt vonLösung für das Hochladen, Drehen und Komprimieren mobiler Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!