更新记录

1.1.6（2019-10-21） 下载此版本

• 优化裁剪框

1.1.5（2019-10-17） 下载此版本

优化图片缩放功能

1.1.4（2019-10-17） 下载此版本

删除测试代码

平台兼容性

DEMO

template

<template>
    <view>
        <button @tap="upload">上传</button>
        <image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></image-cropper>
        <image :src="cropFilePath" mode="aspectFit" style="width: 100%;"></image>
    </view>
</template>

script

import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue";

export default {
    data() {
        return {
            tempFilePath: '',
            cropFilePath: '',
        }
    },
    components: {ImageCropper},
    methods: {
        upload() {
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album'], //从相册选择
                success: (res) => {
                    this.tempFilePath = res.tempFilePaths.shift()
                }
            });
        },
        confirm(e) {
            this.tempFilePath = ''
            this.cropFilePath = e.detail.tempFilePath
        },
        cancel() {
            console.log('canceled')
        }
    },
}

属性

事件