cropper.js图片裁剪的使用

1.安装

npm install cropperjs

2.在main.js引入cropper的css样式（一定要加，一定要加，一定要加）

import 'cropperjs/dist/cropper.css'

3.使用

<template>
    <div>
        <h1>Cropper with a range of aspect ratio</h1>
        <div>
            <img id="image" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" alt="Picture" ref="image">
        </div>
        <button @click="clear">清除</button>
        <div>
            x:{{date.x}} <br>
            y:{{date.y}} <br>
            x1:{{date.x1}} <br>
            y1:{{date.y1}} <br>
        </div>
    </div>
</template>
<script>
    import Cropper from 'cropperjs';
    export default {
        name: 'HomeView',
        components: {},
        data() {
            return {
                cropper: null,
                date: {
                    x: null,
                    y: null,
                    x1: null,
                    y1: null,
                }
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.cropper = new Cropper(this.$refs.image, {
                    autoCrop: false, //是否允许在初始化时自动裁剪图片
                    checkCrossOrigin: false, //检查当前图片是否为跨域图片
                    checkOrientation: false,
                    viewMode: 1, //限制裁剪框不超过图片容器的范围。
                    autoCropArea: 0.3, //定义裁剪区域占图片的大小(百分比)。取值为 0 - 1。
                    aspectRatio: 4 / 4,//裁剪器为正方形
                    crop: (event) => {
                        console.log(event.detail);
                        //获取裁剪框左上坐标和右下左边
                        //注意：它的宽度和高度都是跟着图片缩放比例进行缩放的
                        this.date = {
                            x: event.detail.x,
                            y: event.detail.y,
                            x1: event.detail.x + event.detail.width,
                            y1: event.detail.y + event.detail.height,
                        }
                    },


                });

            },
            clear() {
                this.cropper.clear();//清除
                // this.cropper.destroy();
            },
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        margin: 20px auto;
        max-width: 640px;
    }

    img {
        max-width: 100%;
    }
</style>

4.关于API

        cropper.js的中文文档：(44条消息) CropperJS中文文档（翻译自Cropper.js原英文文档）_Double.杨的博客-CSDN博客_cropperjs文档