uniapp图片头像剪裁kpsImageCutter

图片裁剪工具 - DCloud 插件市场

单页面方式引入在vue页面文件引入

import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
    export default {
        components: {kpsImageCutter},
    }

<button @tap="chooseImage()">选择图片</button>
<image class="image" :src="path" style="width:100px;height:120px"></image>
<kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="false" :blob="false" :maxWidth="500" :maxHeight="500"></kps-image-cutter>

方法

 chooseImage() {
                uni.chooseImage({
                    success: (res) => {
                        this.url = res.tempFilePaths[0];//剪裁组件显示
                    }
                });
            },
            onok(ev) {
                this.path = ev.path;//图片地址
                this.url = "";//隐藏组件
            },
            oncancle() {
                this.url = "";
            }