Получение exif-ориентации элемента img и присвоение класса соответственно

javascript html css orientation exif

336 просмотра

1 ответ

17 Репутация автора

У меня есть элемент изображения, и мне нужно изменить поворот изображения на основе ориентации EXIF. Мне нужно сделать это, используя только JavaScript.

Ниже приведены классы CSS:

.image_up {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}
.image_down {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.image_left {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

И это логика назначения CSS для файла изображения:

{
    case 3: // 180 rotate left
        document.getElementById("user-avatar").className = "image_up";
        break;
    case 6: // 90 rotate right
        document.getElementById("user-avatar").className = "image_down";
        break;
    case 8: // 90 rotate left
        document.getElementById("user-avatar").className = "image_left";
        break;
}

Моя проблема заключается в получении exif-данных файла изображения и выборе подходящего класса перед показом изображения.

Автор: Zeyad Fareed Haddad Источник Размещён: 18.07.2016 09:09

Ответы (1)


-1 плюса

1 Репутация автора

Если вы используете vue.js, вы можете просто использовать это, vue-img-orientation-changerчтобы исправить неправильную ориентацию img.

vue-img-orientation-changer является плагином директивы vue.

Проверьте пример: Fix Img Orientation

Github Repository: vue-img-direction-changer

Автор: Nikk Li Размещён: 18.01.2019 02:25
Вопросы из категории :
32x32