阿里云OSS上传图片被自动旋转90℃的解决方案

 

由于拍摄的图片是横拍的, 上传的时候被自动旋转了, 像下面这样:

问题描述:

上传图片到阿里云OSS，再HTML标签使用OSS图片路径，展示的图片被自动旋转了；但是将图片图片路径直接浏览器打开，是原始没有旋转过的.

 

那么如何解决?

很简单, 只需要在图片链接中加上一个属性x-oss-process, 像下面这样:

url链接加上?x-oss-process=image/resize,w_100/auto-orient,1

<img class='image-bg' :src="info.liveImage ? (info.liveImage+'?x-oss-process=image/resize,w_100/auto-orient,1') :defaultImg" alt="">

 

阿里云文档: https://help.aliyun.com/document_detail/44691.html?spm=a2c4g.11186623.6.1160.1c5d149dByJ2yu

https://yq.aliyun.com/articles/586653?spm=5176.10695662.1996646101.searchclickresult.2ec22450a3iTus

附上一个通用组件处理此类图片：

html: 

<template>
    <div class="wj-image">
        <div class="wj-image-container" :style="styles" @click="onClick"></div>
    </div>
</template>

//JS部分
export default {
    name: 'XImage',
    props: {
        src: {
            required: true,
            default () {
                return ''
            }
        },
        ratio: {
            type: Number,
            default () {
                return 0
            }
        },
        crop: {
            type: Boolean,
            default () {
                return true
            }
        },
        avatar: {
            type: Boolean,
            default: false
        },
        width: {
            type: [Number, String],
            default () {
                return 0
            }
        },
        height: {
            type: [Number, String],
            default () {
                return 0
            }
        },
        quality: {
            type: Number,
            default () {
                return 85
            }
        }
    },
    data () {
        return {
            image: null,
            loadFinish: false
        }
    },
    computed: {
        styles () {
            let styles = {
                'padding-bottom': (this.ratio * 100) + '%',
                'background-size': this.crop ? 'cover' : '100% 100%',
                'background-color': this.loadFinish ? 'transparent' : '#f3f3f3',
                'background-image': `url(${this.imagePath})`
            }
            return styles
        },
        placeholderImage() {
            return this.avatar ? '/images/avatar.png' : '/images/nopic.png'
        },
        imagePath () {
            return this.loadFinish ? this.realImagePath : this.placeholderImage
        },
        realImagePath () {
            let url = this.src.replace('img.wyhou.com', 'static.wyhou.com')
            if (this.width && this.height) {
                let width = Math.round(this.width)
                let height = Math.round(this.height)
                url += `?x-oss-process=image/resize,limit_0,m_fill,w_${width},h_${height}`
            }
            if (this.quality) {
                if (this.width && this.height) {
                    url += `/quality,q_${this.quality}`
                } else {
                    url += `?x-oss-process=image/quality,q_${this.quality}`
                }
            }
            return url
        }
    },
    watch: {
        src (newVal, oldVal) {
            if (newVal !== oldVal) {
                this.startToLoad()
            }
        }
    },
    methods: {
        startToLoad () {
            this.image = new Image()
            this.image.src = this.realImagePath
            this.loadFinish = false
            this.image.onload = this.onLoadImage
        },
        onLoadImage () {
            this.loadFinish = true
            this.image = null
        },
        onClick (event) {
            this.$emit('click', event)
        }
    },
    mounted () {
        this.startToLoad()
    }
}