На iPhone, когда я делаю вертикальное изображение, мой компонент Vue работает неправильно - PullRequest
Новая
       9

На iPhone, когда я делаю вертикальное изображение, мой компонент Vue работает неправильно

0 голосов
/ 30 января 2019

У меня проблемы с отображением недавно загруженных фотографий в форму.Если изображение было сделано по телефону, оно может иметь свойство exif, но браузер не обрабатывает это свойство, получается, что изображение можно перевернуть или перевернуть.

вверх ногамиpicture

Я решил эту проблему с библиотекой exif-js.Написав (похитив на каком-то веб-сайте) компонент и потратив много времени, я добился того, что при загрузке и обработке картинка поворачивается в правильном направлении.

правая боковая картинка

Но во время теста мы выяснили, что на iPhone, если вы загружаете не с фотографий, а фотографируете по вертикали вручную, картинка обычно выходит за пределы div в нижний левый угол.

iphone неправильно изображение

После этого все остальные фотографии также отображаются неправильно.На устройстве Android все в порядке.

В этом img-теге: src изменяется динамически, и мне тоже нужно динамически преобразовывать, поэтому мне нужно использовать метод updated ().Я знаю, что это плохой код, но ...

Использование : 

<div class="form-group">
    <div class="row">
        <div class="col-md-6 edit-activity-images">
            <auto-rotate><img class="edit-activity-images-inner" alt="activity"                                                 
          :src="getUploadedImageBackground()||staticFile('images/img-place-holder.png')"
                                        ></auto-rotate>

Стиль 

 edit-activity-images-inner{
     object-fit: cover;
     width: 100%;
     height: 100%;
 }

Компонент 

<template>
    <div class="holder">
        <slot></slot>
    </div>
 </template>

<script>
    import imagesLoaded from 'imagesloaded'
    import EXIF from 'exif-js'

    const rotateAngles = [
        {},
        {y: 0, z: 0},
        {y: 180, z: 0},
        {y: 0, z: 180},
        {y: 180, z: 180},
        {y: 180, z: -90},
        {y: 0, z: -90},
        {y: 180, z: 90},
        {y: 0, z: 90}
    ];

function getOrientation(el) {
    return new Promise(function (resolve) {
        imagesLoaded(el, function () {
            EXIF.getData(el, function () {
                const orientation = EXIF.getTag(this, 'Orientation');
                resolve(orientation);
            })
        })
    })
}

function getRotationAngle(newOrientation, oldOrientation) {
    const y = rotateAngles[newOrientation].y - rotateAngles[oldOrientation].y;
    let z = rotateAngles[newOrientation].z - rotateAngles[oldOrientation].z;
    if (y)
        z = z * -1;
    return { y, z }
}

const recently_added = {};
const havent_exif = {};

export default {
    name: "AutoRotate",
    updated() {
        const slot = this.$slots.default[0];
        if (slot.tag !== 'img') {
            console.error('Warning: slot should be an img tag.');
            return;
        }
        const holder = this.$el;
        const img = holder.childNodes[0];

        img.exifdata = undefined;
        if (recently_added[img.src]) {
            img.style['transform'] = recently_added[img.src];
            return
        } else if (havent_exif[img.src]) {
            img.style['transform'] = "translate(0px, 0px) rotateY(0deg) rotateZ(0deg)";
            return;
        }
        getOrientation(img).then(function (currentOrientation) {
            if (currentOrientation !== undefined) {
                const angle = getRotationAngle(1, currentOrientation);
                const transform = `rotateY(${angle.y}deg) rotateZ(${angle.z}deg)`;
                let translate = '';
                if (angle.z % 180 !== 0) {
                    const height = img.clientHeight;
                    const width = img.clientWidth;
                    translate = `translate(${(height - width) / 2}px, ${(width - height) / 2}px)`;
                    holder.style['width'] = `${height}px`;
                    holder.style['height'] = `${width}px`;
                }
                img.style['vertical-align'] = 'bottom';
                img.style['transform'] = translate + ' ' + transform;
                recently_added[img.src] = translate + ' ' + transform;
            } else {
                havent_exif[img.src] = true;
                if (!recently_added[img.src]) {
                    img.style['transform'] = "translate(0px, 0px) rotateY(0deg) rotateZ(0deg)";
                }
            }
        })

    }
}


<style scoped>
     .holder {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
 </style>

Ну, надеюсь, кто-то может мне помочь и написать, что я могу сделать ...

1 Ответ

0 голосов
/ 13 февраля 2019

Я удалил эту часть кода, потому что она работает некорректно.И это сделано ... 

if (angle.z % 180 !== 0) {
         const height = img.clientHeight;
         const width = img.clientWidth;
         translate = `translate(${(height - width) / 2}px, ${(width - height) / 2}px)`;
         holder.style['width'] = `${height}px`;
         holder.style['height'] = `${width}px`;
}
...