Иногда мы хотим получить доступ к данным поворота JPEG в формате EXIF на стороне клиента с помощью JavaScript.
В этой статье мы рассмотрим, как получить доступ к данным поворота JPEG в формате EXIF на стороне клиента с помощью JavaScript.
Доступ к данным вращения JPEG EXIF в JavaScript на стороне клиента с помощью JavaScript-Load-Image
Мы можем использовать библиотеку JavaScript-Load-Image для загрузки метаданных EXIF из изображения.
Чтобы использовать его, мы пишем:
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.18.0/load-image.all.min.js"></script> <input type='file'>
Мы добавляем скрипт load-image.all.min.js, чтобы добавить анализатор метаданных с основной библиотекой.
Затем, чтобы разобрать метаданные EXIF, мы пишем:
const input = document.querySelector('input')
input.addEventListener('change', (e) => {
const [file] = [...e.target.files]
loadImage.parseMetaData(
file,
(data) => {
console.log(data.exif)
}, {
includeExifTags: {
0x0112: true,
ifd1: {
0x0201: true,
0x0202: true
},
0x8769: {
0x9000: true
}
}
}
)
})
На входе получаем файл и присваиваем его объекту file.
Затем мы вызываем loadImage.parseMetaData для анализа метаданных EXIF из изображения.
Затем мы передаем объект file и обратный вызов с data, который имеет свойство data.exif, которое имеет метаданные EXIF в объекте.
Третий аргумент — это объект с тегами EXIF, которые мы хотим получить.
Они включают 0x0112 для ориентации, 0x0201 для смещения данных эскиза, 0x0202 для длины данных, 0x8769 для указателя EXIF и 0x9000 для версии EXIF.
Теперь, когда мы выбираем файл изображения, мы должны увидеть загруженные данные EXIF.
Заключение
Мы можем использовать библиотеку JavaScript-Load-Image для загрузки метаданных EXIF из изображения.
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.
Повысьте узнаваемость и признание вашего технического стартапа с помощью Circuit.
