Verschiedene Probleme beim Hochladen lokaler Bilder in HTML5

Dies ist ein Projekt, das ich kürzlich für ein Unternehmen geschrieben habe. Die Projektanforderungen lauten ungefähr wie folgt:
1.Laden Sie lokale Mobiltelefonbilder hoch und schneiden Sie sie dann zu (Anforderungen). später hinzugefügt)2. Kann Bilder zum Zuschneiden drehen (Anforderungen werden später hinzugefügt)
3. Geben Sie verschiedene Texte ein, wählen Sie Farben aus, versehen Sie den Text und zwei zugehörige Bilder mit einem Wasserzeichen und laden Sie es hoch Der Server generiert eine Bildadresse, gibt sie zurück und teilt sie.

Die Funktionen sind ungefähr die oben genannten, und die anderen sind verschiedene kleine Funktionen. Lassen Sie uns insgesamt über die Verwendung von Vue sprechen (einschließlich Router,

Ressource). Webpack usw.)

So erfüllen Sie diese Anforderungen:

1. Lokaler Upload, verwenden Sie
html5s Datei API Um das Bild zu erhalten, wird die Base64-Kodierung dem src von img zugewiesen (Pit 1, 2), und dann wird eine Ebene zum Zuschneiden angezeigt. Beim ersten Zuschneiden wird ein p über das img gelegt, um die Koordinaten zu berechnen Wenn es fertig ist, verwenden Sie canvas, um das Bild aufzunehmen und dann den Wert abzurufen (Pit 3). 2. Diese Funktion wird durch die Verwendung von Canvas zum Drehen von Bildern gelöst. Dabei ist zu beachten, dass beim Drehen das Seitenverhältnis beibehalten und auf die Breite und Höhe geachtet werden muss (Pit 4).
3. Verwenden Sie Leinwand zum Überlagern von Wasserzeichen und Bildern. Achten Sie vor allem auf die Koordinaten.

Lassen Sie uns über die Fallstricke sprechen:

1. Die Base64-Kodierung von src zu erhalten scheint kein Problem zu sein, aber tatsächlich gibt es ein großes Problem. Viele Bilder werden vertikal auf dem Mobiltelefon angezeigt, aber danach Nachdem ich die Base64-Codierung erhalten hatte, wurde nach direkter Zuweisung zum src von img festgestellt, dass der Bildschirm horizontal war. Als ich diese Situation zum ersten Mal entdeckte, dachte ich, es handele sich um ein isoliertes Phänomen. Nach wiederholten Versuchen stellte ich schließlich fest, dass dies eine sehr häufige Situation ist, insbesondere bei iPhone-Telefonen. Es teilt auch die von Ihnen ausgewählten Bildordner in das gleiche Bild auf Album und Fotostream und ein horizontaler Bildschirm, ein vertikaler Bildschirm. Ich kann einfach nicht verstehen, warum? ? ? Im Grunde genommen wurde ein Nachmittag mit diesem Thema verbracht.

Bis ich am Abend zurückkam und einen Freund von mir, der ein Meister der IOS-Entwicklung ist, @叶 Gucheng, fragte, sagte er mir, dass der Grund dafür, dass die Kamera des iPhones jetzt horizontal ist, darin liegt, dass das Mobiltelefon Wenn das Telefon einen vertikalen Bildschirm anzeigt, hat iOS dies selbst verarbeitet. Sie können die horizontalen und vertikalen Probleme anhand eines Aufnahmewinkelwerts des Bildes beurteilen, aber dieser Wert ist auf unserer Website wirklich nicht verfügbar, was sehr peinlich ist. Wie kann man dieses Problem lösen? ? ------- Die von mir verwendete Lösung: Durch das Drehen von Bildern können Benutzer Bilder aktiv drehen und Winkel auswählen. Es gibt eine weitere Lösung, die auch in Pit 2 zum Einsatz kommt und später besprochen wird.

2. Zusätzlich zu diesem horizontalen Bildschirm erfolgten einige Uploads von

Android-Mobiltelefonen nach der Auswahl des Bildes. Ich dachte zunächst, dass der Grund darin lag, dass die Datei-API von HTML5 nicht funktionierte unterstützt, daher wird das hochgeladene Bild nicht angezeigt und später werden verschiedene Debugger verwendet. Der Grund dafür ist, dass das Änderungs-Ereignis des Eingabe-Tags nicht ausgelöst wird und es keine Möglichkeit dazu gibt Um dieses Problem zu lösen, habe ich nach Durchsicht verschiedener offizieller Dokumente und des StacksÜberlauf herausgefunden, dass zwei Attribute zur Eingabe von type="file hinzugefügt werden können " zur Darstellung hochgeladener Bilder auf dem Mobiltelefon.

 <input type="file" name="image" class="file-choose" id="file" accept="image/*" v-on:change="chooseFileChange($event)" capture/>

Nach dem Hinzufügen von „Akzeptieren“ und „Aufnehmen“ auf diese Weise verfügt das betreffende Android-Telefon über mehrere Ordner, die bei der Auswahl von Bildern ausgewählt werden können. Bei einigen kann dies häufig nicht der Fall sein Die Bilder auf der SD-Karte können nicht abgerufen werden und das Änderungsereignis wird nicht ausgelöst, da keine Root-Berechtigung zum Abrufen der Dateidaten vorhanden ist. Dies ist ein weiteres unlösbares Problem, da sich Ihr Web im Browser befindet und die Berechtigungen niedrig sind (ich muss mich über die Berechtigungen des Webs beschweren, verdammt.) Wie kann das Problem gelöst werden? ? ? Bypass, das heißt, wenn Ihre Seite in der eigenen App Ihres Unternehmens verschachtelt ist, lassen Sie sich von der App helfen. Dann wird unser Projekt von WeChat verbreitet und muss sich im WeChat-Browser befinden, damit Sie die JSSDK-Option Image

von WeChat aufrufen können Schnittstelle , er kann diese Berechtigungen umgehen, und ein weiterer Vorteil besteht darin, dass es das Problem von Pit 1 löst. Es kann das Problem des horizontalen Bildschirms bewältigen, dh beim Hochladen des vertikalen Bildschirms wird der tatsächliche horizontale Bildschirm hochgeladen ist ein vertikaler Bildschirm, aber die Kosten sind nicht gering. Sie müssen das Bild auswählen, einen Schlüssel erhalten und dann das SDK weiter aufrufen, um es auf den WeChat-Server zu übertragen, eine Server-ID abzurufen und diese ID zu übergeben auf Ihren eigenen Server, lassen Sie sie über diese ID zu WeChat gehen, um Bilder auf ihren eigenen Server herunterzuladen, und senden Sie eine URL an Sie zurück. Der Prozess ist sehr umständlich und die Anzahl der Downloads ist begrenzt (Sie können Ladebeschränkungen bei WeChat beantragen);

Referenz: WeChat js sdk select image interface

3. Nachdem die oben genannten Probleme gelöst sind, werden wir sie zunächst wie folgt behandeln Erhalten Sie die Base64, weisen Sie einem Bild einen Wert zu, verschieben Sie dann den Rahmen auf dem Bild, berechnen Sie die Koordinaten und schneiden Sie es dann zu. Auf der PC-Seite gibt es überhaupt keine Probleme, und beim Testen auf WeChat ist die Effizienz sehr hoch. Es wurden 3 Probleme gefunden (verdammt, die Handyseite ist eine Falle), eine Funktion, 3 verschiedene Fragen. Die erste Frage ist, dass jeder weiß, dass Mobiltelefone heutzutage hohe Pixel haben und die Bilder nicht klein sind base64 ist auch nicht klein, es befindet sich tatsächlich im Speicher, was dazu führt, dass das gesamte WeChat abstürzt (es stürzt ab, es stürzt ab und WeChat stürzt ab – dreimal). Wenn Sie Vue zum Binden von Berührungsereignissen verwenden, ist die Reaktion sehr langsam und die Bewegung ist überhaupt nicht reibungslos. Und es stürzt auch ab, ja, stürzt wieder ab. Das dritte Problem besteht darin, dass Sie zum Drehen die Canvas-Konvertierung verwenden müssen. Nachdem die Konvertierung abgeschlossen ist, müssen Sie der Bildquelle einen Wert zuweisen, was sehr mühsam ist.

Lösung: Verwenden Sie Canvas einheitlich, verwenden Sie kein IMG mehr, bis der Zuschnitt abgeschlossen ist, rufen Sie einfach die Base64 von IMG ab und verwenden Sie beim Exportieren JPEG anstelle von PNG und verringern Sie meiner Meinung nach etwas die Bildqualität Es gibt keine Auswirkungen, das heißt, das Zuschneiden und Drehen des Bildes erfolgt ausschließlich auf der Leinwand. Es wird empfohlen, das Ereignis direkt nativ zu binden.

Die Gefahr der Drehung besteht darin, dass wir zuerst die Daten des Originalbildes speichern und dann das Bild selbst drehen müssen Es scheint, dass es keine Möglichkeit gibt, es zu drehen. Die Matrix-Methode scheint nicht zu funktionieren (vielleicht bin ich nicht gut in Mathe!!! Wenn es jemand weiß, bitte Demo).

Das obige ist der detaillierte Inhalt vonVerschiedene Probleme beim Hochladen lokaler Bilder in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!