Organisieren Sie das Dokument, suchen Sie nach einem Instanzcode für H5, um die Kamera zu rufen, um Fotos zu machen, und komprimieren Sie das Bild und sortieren Sie es aus und strennen Sie es.
HintergrundVor kurzem möchte ich eine H5 -Seite erstellen.
Die Hauptfunktionspunkte des vorderen Endes sind:
Der einfachste Weg, die Kamera aufzurufen, besteht darin, die Eigenschaft für Eingabedatei [Kamera] zu verwenden:
<Eingabe type = Datei capture = carera ACCEPT = Bild/*> // Kamera <Eingabe type = Datei Accept = Image/*> // Album
Diese Methodenkompatibilität ist immer noch problematisch. Ich habe viele gute Lösungen im Internet durchsucht und konnte nur weiter aufschreiben. Wesen Wesen
Bildkomprimierung Die Bildkomprimierung wird verwendet, um FileReader und <canvas> zu verwenden.
Mit dem FileReader -Objekt können Webanwendungen den Inhalt der auf dem Computer asynchron gespeicherten Datei lesen und mit dem Datei- oder Blob -Objekt die Datei oder Daten angeben, die Sie lesen möchten.
<Canvas> ist ein HTML -Element, das Skripte zum Zeichnen von Grafiken verwenden kann, mit denen Grafiken und einfache Animationen zeichnen können.
Die Bildkomprimierung sollte die Auflösung und Qualität des Bildes komprimieren. des Bildes.
Var max_wh = 800; ; / Dataurl erhalten über Filerereader
Dann gibt es die Qualität des Bildes. Erstellen Sie dynamisch ein <Canvas> -Tag und komprimieren Sie dann das Bild:
var quality = 80; , 0, Image.Width, Image.Height);
Dann das Ergebnis des Hochladens auf den Server und das Anzeigen des Servers, aber die Dinge sind nicht so reibungslos. Wesen Wesen Nachdem das iOS -Mobiltelefon komprimiert wurde, ist das Bild unerklärlich gedreht und löst das Problem weiterhin.
Löse iOS -BildrotationZitat exif.js zuerst und erhalten Sie die Informationsinformationen der Fotorichtung über exif.getData und exif.gettg.
// Datei erhalten exif.getData (Datei, function () {orientation = exif.gettg (Datei, 'Orientierung');});Die Bedeutung jedes Orientierungswerts entspricht dem iPhone -Mobiltelefon, um Fotos zu machen:
| Orientierung | beschreiben |
|---|---|
| 3 | Das horizontale Bildschirmaufnahmen des iPhone, zu diesem Zeitpunkt befindet sich die Home -Taste links, das Bild dreht sich um 180 Grad im Vergleich zur ursprünglichen Position |
| 6 | iPhone schießt vertikal, zu diesem Zeitpunkt ist die Home -Taste unten (die Richtung des Mobiltelefons), und das Bild kann sich im Vergleich zur ursprünglichen Position um 90 Grad drehen. |
| 8 | Das iPhone schießt den vertikalen Bildschirm, zu diesem Zeitpunkt ist die Home -Taste oben und das Bild dreht sich im Uhrzeigersinn um 90 Grad im Vergleich zur ursprünglichen Position. |
Switch (Orientierung) {Fall 6: Fall 8: CVS.Width = Höhe; Zu diesem Zeitpunkt rotieren Sie den linken Fall 3: // 180 Grad links. Normale Richtung des Mobiltelefons) Fall 6: Kontext. 8: // inverse Zeit im Uhrzeigersinn 90 Grad Kontext.Laden Sie dann das Bild hoch und stellen Sie fest, dass das Bild unter iOS normal ist.
Der vollständige Code ist unten angegeben:
$ ('input [type = file]'). /I.test (Datei.Type) {exif.getData (Datei, Funktion () {Orientierung = exif.gettag (Datei, 'Orientierung');}); max_wh = 800; Im Bild. 80; .HELT = Breite;} var context = cvs.getContext (2d); 180 Grad nach links rotieren. des Telefons. coclockwise context.rotate (-0.5 * math.pi); Bild/JPEG ', Frage/100); )}});Das oben genannte ist der Inhalt dieses Artikels.