更新记录

1.1.6(2019-10-21)

  • 优化裁剪框

1.1.5(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')
        }
    },
}

属性

名称 功能 默认值 可选值
crop-width 裁剪框宽度 200 0 ~ max
crop-height 裁剪框度度 200 0 ~ max
src 待裁剪图片地址 本地文件路径
crop-fixed 是否固定裁剪框 false true / false
show-reset-btn 显示重置按钮 true true / false
show-rotate-btn 显示旋转按钮 true true / false

事件

名称 功能 返回值
confirm 截图后点击确定的回调事件 detail.tempFilePath获取裁剪后的图片地址(base64)
cancel 点击取消的回调事件

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问