Drehen Sie hochgeladene Bilder mit EXIF-Ausrichtung in Parse Cloud Code

Question

Portrait Bilder, von einigen mobilen Geräten genommen, über ein HTML-Formular hochgeladen bekommt die falsche Ausrichtung während in eine Webseite eingebettet.

Dies ist aufgrund der EXIF orientation Metadaten, die zum Beispiel könnte der Wert 6 = Rotate 90 CW sagen, das Bild haben mit einer spezifischen Ausrichtung angezeigt werden. Das Bild selbst - ohne Metadaten - wird jedoch seitlich als horizontales Bild gespeichert. Abhängig vom Image-Renderer sehen Sie das Bild entweder korrekt (als linkes Thumbnail unten) oder ohne die angewendeten Rotations-Metadaten (als das rechte Thumbnail). Bei Bildern, die in Websites eingebettet sind, handelt es sich um Letzteres.

Gibt es eine Möglichkeit das hochgeladene Bild zu drehen manuell entweder Javascript oder Node.js, in einem Parse Wolke-Code unter Verwendung von gehosteten Web-App? (Parse Cloud Code nur supports a few dependencies - aber Sie könnten auch kleine Skripte selbst hochladen).

Answer 1

Ich schrieb eine clientseitige Klasse zum Drehen und Ändern der Größe der hochgeladenen Bilder. Ich verwende das Canvas-Element und HTML5 FileReader.

Quellcode und einige Beispiele finden Sie unter https://github.com/ajgarn/CanvasImageUploader.

Die Klasse gibt Ihnen die Bilddaten (a Blob), die Parse's REST API die gleiche Art und Weise geschrieben werden können, wie Sie eine Datei über Filereader hochgeladen haben würde.

Answer 2

Sie sollten npm Module in Cloud-Code verwenden können:

var jpeg = require('jpegorientation'); 

jpeg.autoRotate('image.jpg', function (err) { 
    // error handler 
}); 

Wenn Sie sich nicht: Using npm modules in cloud code

Sobald Sie diese Arbeits haben, das jpegorientation npm Modul Ihren Anforderungen entsprechen sollte Damit die npm-Module funktionieren, können Sie die Bibliothek immer manuell hinzufügen. Wenn Sie Probleme mit dieser Bibliothek und Knoten-gyp laufen, gibt es andere Module zu berücksichtigen:

• exif-rotate (kombiniert mit exif oder exif-component, um die Ausrichtung zu bestimmen)
• fix-orientation (sieht browserbasierte)