更新记录

1.0.2（2020-01-08）

1、裁剪过程中添加了等待提示。 2、修护移动裁剪框，导致位置错误的bug 3、更新demo中的代码（修护ios移动的bug）

1.0.1（2019-12-14）

修护ios上无法移动的bug

平台兼容性

轻量级图片裁剪工具

使用方式一

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

属性说明

事件说明

示例

裁剪大小固定为200*300的图片，一般用户头像上传，固定图片大小

<template>
    <view class="content">
        <button @tap="chooseImage()">选择图片</button>
        <image class="image" :src="path"></image>
        <kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="true" :width="200" :height="300"></kps-image-cutter>
    </view>
</template>

<script>
    import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
    export default {
        components: {kpsImageCutter},
        data() {
            return {
                url: "",
                path: ""
            }
        },
        onLoad() {

        },
        methods: {
            chooseImage() {
                uni.chooseImage({
                    success: (res) => {
                        // 设置url的值，显示控件
                        this.url = res.tempFilePaths[0];
                    }
                });
            },
            onok(ev) {
                this.path = ev.path;
                this.url = "";
            },
            oncancle() {
                // url设置为空，隐藏控件
                this.url = "";
            }
        }
    }
</script>

<style>
.image {
    width: 200px;
    height: 200px;
}
</style>

裁剪任意宽高的图片，宽高比不受约束，可以拖动四个角和边框来改变宽高，一般用于图片上传，可设置maxWidth何minHeight来防止用户上传的图片过大，大小超过最大值，将会同比例缩小。

<template>
    <view class="content">
        <button @tap="chooseImage()">选择图片</button>
        <image class="image" :src="path"></image>
        <kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="false" :maxWidth="500" :minHeight="300"></kps-image-cutter>
    </view>
</template>

<script>
    import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
    export default {
        components: {kpsImageCutter},
        data() {
            return {
                url: "",
                path: ""
            }
        },
        onLoad() {

        },
        methods: {
            chooseImage() {
                uni.chooseImage({
                    success: (res) => {
                        // 设置url的值，显示控件
                        this.url = res.tempFilePaths[0];
                    }
                });
            },
            onok(ev) {
                this.path = ev.path;
                this.url = "";
            },
            oncancle() {
                // url设置为空，隐藏控件
                this.url = "";
            }
        }
    }
</script>

<style>
.image {
    width: 200px;
    height: 200px;
}
</style>