基于Vue的移动端图片裁剪组件（Clipic）可自动压缩

安装：

npm install --save clipic

使用代码：

<template>
    <div>
        <div class="photo">
            <img  :src="base64" />
            <input type="file" name="file" ref="files" accept="image/*" @change="uploadImg" />
        </div>
    </div>
</template>


<script>
import Clipic from 'clipic'
const clipic = new Clipic()
export default {
    components: {},
    data() {
        return {
            base64: '',
        }
    },
    methods: {
        uploadImg() {
            let _this = this
            const files = this.$refs.files.files
            const reader = new FileReader()
            reader.readAsDataURL(files[0])
            reader.onload = (img) => {
                clipic.getImage({
                    width: 200,
                    height: 200,
                    src: img.target.result,
                    onDone: (base64) => {
                        //这里就是上传完成的回调函数，可以在这里请求接口上传至服务器
                        _this.base64 = base64
                        console.log(this.base64) //图片上传完成后生成的base64
                    },
                })
            }
            //执行完成之后把input的value值置空，否则无法选择相同的图片
            this.$refs.files.value = ''
        },
    },
}
</script>

<style scoped lang="less">
.photo{
    width: 100px;
    img{
        width: 100%;
        
    }
}
</style>
<style  >
</style>

使用展示：