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

Question

我在将最近上传的照片显示到表单时遇到问题。如果图片是phone做的，可能有exif属性，但是浏览器不处理这个属性，原来图片可以翻过来或者侧边.

upside down picture

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

right side picture

但是在测试过程中，我们发现在iphone上，如果不是从照片下载，而是手动竖拍，那么图片一般会超出div到左下角。

iphone incorrectly image

之后所有其他照片也显示不正确。在 android 设备上一切正常。

在这个 img-tag: src 是动态变化的，我也需要 'transform' 动态变化，所以我需要使用 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`;
}

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

On iPhone when I take vertical picture my vue component is not works correctly

html

javascript

css

exif

vue.js