Поворот загруженных изображений, содержащих ориентацию EXIF, в Парке облачного кода

Question

Портретные фотографии, взятые с некоторых мобильных устройств, загружаемых с помощью HTML-формы, попадают в неверную ориентацию, когда они встроены в веб-страницу.

Это связано с EXIF orientation метаданных, которые могли бы, например, иметь значение 6 = Rotate 90 CW говоря изображение, которое будет отображаться с определенной ориентацией. Однако само изображение - без метаданных - хранится боком в виде горизонтального изображения. В зависимости от средства визуализации изображений вы либо увидите изображение правильно (в качестве левого миниатюры ниже), либо без примененных метаданных вращения (в виде правого миниатюры). Для изображений, встроенных в веб-сайты, это последний.

Есть ли способ, чтобы повернуть загруженную картинку вручную с использованием либо Javascript или Node.js, в синтаксическое Облако кодекса размещается веб-приложение? (Только код облака разбора supports a few dependencies - но вы все равно можете загружать небольшие скрипты).

Answer 1

В конце концов я написал класс на стороне клиента для поворота и изменения размера загруженных изображений. Я использую элемент Canvas и HTML5 FileReader.

Для исходного кода и некоторых примеров см. https://github.com/ajgarn/CanvasImageUploader.

Класс дает вам данные изображения (Blob), которые могут быть отправлены на Parse's REST API так же, как вы загрузили файл через FileReader.

Answer 2

Вы должны быть в состоянии использовать npm модули в облаке код: Using npm modules in cloud code

После того, как вы получили, что работает, модуль jpegorientation НПМ должен соответствовать вашим требованиям:

var jpeg = require('jpegorientation'); 

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

Если вы не можете получить модули npm, вы всегда можете включить библиотеку вручную. Если у вас возникли проблемы с этой библиотекой и узлом-лавочка, есть и другие модули, чтобы рассмотреть:

• exif-rotate (в сочетании с exif или exif-component для определения ориентации)
• fix-orientation (смотрит на основе браузера)