使用 VueCropper 第三方库来对图片进行裁剪。

采用原生 input 标签，设置 type 为 file，即可上传文件。

<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage"/>

在 change 事件，通过 e.target.files 获取选中文件信息。

new 一个 FileReader 对象，在 onload 事件中，通过 event.target.result 获取到 base64  的图片信息。使用 ref 虚拟一个 DOM 元素，将获取到 base64  的图片信息挂载在上面。如果首次选择图片，this.$refs.cropper 是 undefined ，再次选择图片，我们需要将原来渲染的东西替换掉。

setImage(e){
    const file = e.target.files[0];
    if (!file.type.includes('image/')) {
        return;
    }
    const reader = new FileReader();
    reader.onload = (event) => {
        this.dialogVisible = true;
        this.imgSrc = event.target.result;
        this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
    };
    reader.readAsDataURL(file);
},

导入VueCropper 组件，添加 ready zoom cropmove 等 缩放、滚动事件。

<vue-cropper ref='cropper' :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage" style="width:100%;height:300px;"></vue-cropper>

import VueCropper  from 'vue-cropperjs';
components: {
    VueCropper
},

通过 cropImage 方法，调用 getCroppedCanvas() 返回 HTMLCanvasElement 对象。使用 HTMLCanvasElement.toDataURL to get a Data URL,获取处理后的图片，渲染到页面上。

cropImage () {
    this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
},

更多功能，请访问：vue-cropperjs