browser-image-guard
Mit browser-image-guard prüfe und verarbeite ich Bild-Uploads im Browser, konvertiere HEIC und entferne EXIF- und GPS-Metadaten.
npm install browser-image-guardDas Problem
Ich berücksichtige Dateien mit irreführenden MIME-Typen und HEIC-Bilder, die ein Backend möglicherweise nicht annimmt. Fotos können beim Hochladen auch EXIF-Metadaten mit GPS-Koordinaten enthalten.
Ich berücksichtige Fehler bei der Kompression, ältere mobile Browser, die beim Laden hängen bleiben können, und Content-Security-Policy-Regeln, die einen Web Worker am Starten hindern können.
Der Ansatz
Ich prüfe die Magic Bytes, statt mich auf den MIME-Header zu verlassen. Die Pipeline konvertiert HEIC/HEIF in JPEG und entfernt EXIF- und GPS-Metadaten durch erneutes Kodieren. Sie korrigiert die Ausrichtung, skaliert und komprimiert innerhalb der Größenlimits und bereinigt Dateinamen.
Ich lasse die Verarbeitung in einem Web Worker laufen, wenn die Umgebung es erlaubt; andernfalls läuft sie im Hauptthread. Typisierte Fehler helfen der aufrufenden Oberfläche, Verarbeitungsfehler anzuzeigen.
Als Einstiegspunkt stelle ich processImage(file) bereit. Die Funktion liefert ein komprimiertes JPEG für den Upload oder wirft einen typisierten Fehler.
Das Ergebnis
Ich veröffentliche die Bibliothek auf npm als ESM-Paket mit TypeScript-Typen. Ich übergebe die ausgewählte Datei an processImage(file), verwende das zurückgegebene JPEG für den Upload und behandle Fehler in der Oberfläche.