在我拍摄垂直图片的iPhone上，我的vue组件无法正常工作

Question

我在将最近上传的照片显示到表单时遇到问题。如果图像是通过电话制作的，它可能有一个exif属性，但浏览器不处理这个属性，事实证明图片可以翻转或侧面翻转。

upside down picture

我用exif-js库解决了这个问题。写完（在某些网站上被盗）一个组件并花了很多时间，我在加载和处理过程中实现了这一点，图片转向了正确的方向。

right side picture

但是在测试期间，我们发现在iPhone上，如果你不是从照片下载，而是手动垂直拍照，那么图片通常会超出div到左下角。

iphone incorrectly image

之后，所有其他照片也显示不正确。在Android设备上一切都很好。

在这个img-tag中：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>

好吧，希望有人能帮助我，写下我能做些什么......

Answer 1

好吧，我删除了这部分代码，因为它的工作原理不正确。它完成了......

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`;
}