javascript - read - Gire las imágenes cargadas que contengan orientación EXIF en Parse Cloud Code

loading library javascript

Question

Las imágenes de retratos , tomadas de algunos dispositivos móviles, subidas a través de un formulario HTML obtienen la orientación incorrecta cuando están incrustadas en una página web.

Esto se debe a los metadatos de orientación EXIF , que podrían, por ejemplo, tener el valor 6 = Rotate 90 CW indicando que la imagen se muestre con una orientación específica. Sin embargo, la imagen en sí, sin metadatos, se almacena lateralmente como una imagen horizontal. Dependiendo del renderizador de imágenes, verá la imagen correctamente (como la imagen en miniatura a la izquierda a continuación) o sin los metadatos de rotación aplicados (como la imagen en miniatura a la derecha). Para imágenes incrustadas en sitios web, es la última.

¿Hay alguna forma de rotar la imagen cargada manualmente usando Javascript o Node.js, en una aplicación web alojada de Parse Cloud Code? (Parse Cloud Code solo es compatible con algunas dependencias , pero usted también podría cargar scripts pequeños).

Answer 1

Debería poder usar los módulos npm en el código de la nube: Usar los módulos npm en el código de la nube

Una vez que haya funcionado, el módulo jpegorientation npm debe cumplir con sus requisitos:

var jpeg = require(''jpegorientation'');

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

Si no puede hacer funcionar los módulos npm, siempre puede incluir la biblioteca manualmente. Si tiene problemas con esa biblioteca y node-gyp, hay otros módulos a considerar:

• exif-rotate (combinado con exif o exif-component para determinar la orientación)
• fix-orientation (se ve basada en el navegador)

Answer 2

Terminé escribiendo una clase del lado del cliente para rotar y cambiar el tamaño de las imágenes cargadas. Estoy usando el elemento Canvas y el FileReader HTML5.

Para obtener el código fuente y algunos ejemplos, consulte https://github.com/ajgarn/CanvasImageUploader .

La clase le proporciona los datos de imagen (un Blob), que pueden publicarse en la API REST de Parse de la misma forma en que habría cargado un archivo a través de FileReader.