uniapp 图片不改变原比例自适应js 兼容App H5 微信小程序

/**

* 页面行数不允许超过500行每页

* 模块名:图片自适应组件

* 代码描述:兼容App+wxss 实现百分之设置图片大小

* 作者:xx

* 创建时间:2022/07/04 11:06:18

*/

<template>

    <view :class="zmy+'page-first'" :style="imgStyle">

        <div v-if="upperRight" class="upper-right" @click="deleteImg"><i class="iconfont icon-guanbi"></i></div>

        <div ref="page" id="pageEl" v-if="url" :class="zmy+'page-first_img'"

            :style="{height:styleH.h+'px',width:styleH.w?styleH.w+'px':'100%'}" @click="viewBigPicture">

            <img :class="zmy+'big-img'" :style="{height:styleH.h+'px',width:styleH.w?styleH.w+'px':'100%'}"

                :src="imageUrl" alt="">

        </div>

        <view v-else><i class="iconfont" :style="iconStyle">&#xec0d;</i></view>

    </view>

</template>

<script>

    export default {

        name: 'm-rotation',

        props: {

            upperRight: { //是否显示右上角删除

                type: Boolean,

                default: false,

            },

            iconStyle: { //'flex-en'靠右 靠左flex-start 居中center

                type: Object,

                default: () => {

                    return {

                        fontSize: '80rpx'

                    }

                }

            },

            imgStyle: { //'flex-en'靠右 靠左flex-start 居中center

                type: Object,

                default: () => {

                    return {

                        justifyContent: 'center',

                        alignItems: 'center'

                    }

                }

            },

            index: {

                type: [Number, String],

                default: ""

            },

            url: {

                type: String,

                default: ""

            },

            MImgBH: { //图片最大高度 超过最大将根据最大高度设置同比例下的宽

                type: [Number, String], // auto则是无视最大高，始终宽为主高随宽变-- 数字如果超过最大高最宽随高变

                default: 100

            }

        },

        data() {

            return {

                zmy: this.$zmy, //兼容微信小程序 无法第一时间就获取到原型链上的数据

                styleH: {

                    h: 0,

                    w: null,

                },

                imageUrl: "",

            }

        },

        created() {

            this.getImg()

        },

        methods: {

            //查看大图

            viewBigPicture() {

                this.$emit('bigPicture', this.index)

            },

            //删除

            deleteImg() {

                this.$emit('deleteImg', this.index)

            },

            async getImg() {

                if (this.url) {

                    this.imageUrl = this.url

                    //请求获取图片宽高 uni.getImageInfo 属于异步请求

                    let imageInfoObj = await uni.getImageInfo({

                        src: this.imageUrl

                    })

                    //se6 赋值

                    let {

                        width,

                        height

                    } = imageInfoObj[1]; //图片的宽高

                    //页面节点存在时后执行

                    this.$nextTick(() => {

                        // 通过ref获取div 宽100% 时的数值

                        // #ifdef APP-PLUS || MP-WEIXIN

                        // wx.createSelectorQuery() 必须要in(this)

                        wx.createSelectorQuery().in(this).selectAll("#pageEl").boundingClientRect(

                            (rects) => {

                                rects.forEach((rect) => {

                                    let divW = rect.width

                                    // 计算同比比例下 图片的高度是多少并截取小数点后两位

                                    let proportion = divW / width

                                    //1图片的高成上 比例得出盒子的高 2图片宽3盒子的宽除以图片的宽

                                    this.handler(height * proportion, width, height, proportion)

                                })

                            }).exec()

                        // #endif

                        // #ifdef H5

                        let divW = this.$refs.page.clientWidth; //盒子的宽

                        let proportion = divW / width;

                        //1图片的高成上 比例得出盒子的高 2图片宽3盒子的宽除以图片的宽

                        this.handler(height * proportion, width, height, proportion)

                        // #endif

                    })

                }

            },

            handler(imgH, width, height, proportion) {

                switch (typeof this.MImgBH) {

                    case 'number':

                        if (imgH > this.MImgBH) {

                            proportion = this.MImgBH / height //盒子的高除以图片的高

                            this.$set(this.styleH, 'h', this.MImgBH)

                            this.$set(this.styleH, 'w', (width * proportion).toFixed(2))

                        } else {

                            // 计算同比比例下 图片的高度是多少并截取小数点后两位

                            this.$set(this.styleH, 'h', (imgH).toFixed(2))

                        }

                        break;

                    case 'string':

                        if (this.MImgBH === 'auto') {

                            this.$set(this.styleH, 'h', (imgH).toFixed(2))

                        }

                        break;

                }

            },

        },

    }

</script>

<style lang="scss" scoped>

    .#{$zmy}page-first {

        position: relative;

        width: 100%;

        display: flex;

        align-items: center;

        .upper-right {

            z-index: 9;

            position: absolute;

            top: 0;

            right: 0;

            background: #333333;

            width: 48rpx;

            height: 48rpx;

            border-radius: 0 12rpx 0 12rpx;

            opacity: 0.5;

            display: flex;

            justify-content: center;

            align-items: center;

            .icon-guanbi {

                font-size: 56rpx;

                color: $backColor;

            }

        }

        &_img {

            width: 100%;

            img {

                width: 100%;

            }

        }

    }

</style>