uni-app图片压缩尺寸vue图片压缩尺寸

<template>
    <view class="content">
        <view class="">
            {{'height:'+ h+'px;width:'+w+'px=='+'height:'+ mh+'px;width:'+mw+'px'}}
        </view>
        <button type="default" @click="onSinngle">单张压缩</button>
        <image :src="imageblod" :style="'height:'+ h+'px;width:'+w+'px'"></image>
        <image :src="minImageblod" :style="'height:'+ mh+'px;width:'+mw+'px'"></image>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                h: 0,
                w: 0,
                mh: 0,
                mw: 0,
                imageblod: null,
                minImageblod: null,
            }
        },
        methods: {
            onSinngle() {
                uni.chooseImage({
                    count: 1,
                    success: res => {
                        uni.showLoading({
                            title: '图片压缩中...',
                            mask: true
                        })
                        this.imageblod = res.tempFilePaths[0]
                        this.getImageInfo(res.tempFilePaths[0])
                    }
                })
            },

            // 上传图片
            uploadFile(filePath) {
                this.minImageblod = filePath
                let _this = this
                uni.uploadFile({
                    url: '/api/api/Profile/UploadImg',
                    name: 'file',
                    filePath,
                    formData: {},
                    success: (res) => {
                        let {
                            data
                        } = JSON.parse(res.data)
                        _this.imgResults.push(data)
                    },
                    fail: (err) => {
                        uni.showToast({
                            title: err.errMsg,
                            icon: 'none'
                        })
                    }
                });
            },
            // 获取图片信息
            getImageInfo(src) {
                let _this = this
                uni.getImageInfo({
                    src,
                    success(res) {
                        console.log('压缩前', res)
                        let canvasWidth = res.width //图片原始长宽
                        let canvasHeight = res.height
                        _this.h = canvasWidth
                        _this.w = canvasHeight
                        let img = new Image()
                        img.src = res.path
                        let canvas = document.createElement('canvas');
                        let ctx = canvas.getContext('2d')
                        canvas.width = canvasWidth / 4
                        canvas.height = canvasHeight / 4
                        _this.mh = canvas.height
                        _this.mw = canvas.width
                        ctx.drawImage(img, 0, 0, canvasWidth / 4, canvasHeight / 4)
                        canvas.toBlob(function(fileSrc) {
                            let imgSrc = window.URL.createObjectURL(fileSrc)
                            console.log('压缩后', imgSrc)
                            _this.uploadFile(imgSrc)
                        })
                    }
                })
            },
        }
    }
</script>

<style>
    /*  .image {
        width: 750rpx;
        height: 420rpx;
    } */
</style>