Ruota le immagini caricate contenenti l'orientamento EXIF ​​in Parse Cloud Code

Question

Le immagini di ritratto, prese da alcuni dispositivi mobili, caricate tramite un modulo HTML ottengono l'orientamento errato mentre sono incorporate in una pagina Web.

Ciò è dovuto alle EXIF orientation metadati, che potrebbero ad esempio avere il valore 6 = Rotate 90 CW dire l'immagine da visualizzare con un orientamento specifico. Tuttavia, l'immagine stessa, senza metadati, viene memorizzata lateralmente come immagine orizzontale. A seconda del renderizzatore di immagini, vedrai l'immagine correttamente (come la miniatura di sinistra sotto) o senza i metadati di rotazione applicati (come la miniatura giusta). Per le immagini incorporate nei siti Web, è quest'ultima.

Esiste un modo per ruotare manualmente l'immagine caricata utilizzando Javascript o Node.js, in un codice cloud Parse ospitato web app? (Analizza solo il codice cloud supports a few dependencies - ma puoi ancora caricare piccoli script).

Answer 1

Ho finito per scrivere una classe lato client per la rotazione e il ridimensionamento delle immagini caricate. Sto usando l'elemento Canvas e FileReader HTML5.

Per il codice sorgente e alcuni esempi, vedere https://github.com/ajgarn/CanvasImageUploader.

La classe fornisce i dati dell'immagine (un BLOB), che possono essere inviati allo Parse's REST API nello stesso modo in cui si sarebbe caricato un file tramite FileReader.

Answer 2

Si dovrebbe essere in grado di utilizzare npm moduli in codice nuvola: Using npm modules in cloud code

Una volta che hai che il lavoro, il modulo jpegorientation NPM dovrebbe soddisfare le vostre esigenze:

var jpeg = require('jpegorientation'); 

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

Se non è possibile ottenere il funzionamento dei moduli npm, è sempre possibile includere la libreria manualmente. Se si esegue in problemi con quella biblioteca e il nodo-Gyp, ci sono altri moduli da considerare:

• exif-rotate (in combinazione con exif o exif-component per determinare l'orientamento)
• fix-orientation (guarda basato su browser)