VUE- 选取本地图片，自定义裁切图片比例 vue-cropper

**Vue-Cropper:选取本地图片并自定义裁切图片比例**

在 Vue.js 应用中，经常需要处理用户上传的图片。然而，直接使用原生的 `input` 元素来选择图片，并不提供太多功能。例如，我们可能需要让用户自行裁切图片，以便更好地预览和上传。Vue-Cropper 是一个用于实现此类功能的 Vue 组件。

### 安装依赖首先，我们需要安装 Vue-Cropper 的依赖包：

bashnpm install vue-cropper

bashyarn add vue-cropper

javascriptimport Cropper from 'vue-cropper';

export default {
 name: 'App',
 components: { Cropper },
 data() {
 return {
 // 本地图片的 URL imgSrc: '',
 // 裁切后的图片的DataURL cropperDataUrl: ''
 }
 },
 methods: {
 // 点击上传按钮时触发 handleUploadClick() {
 this.$refs.input.click();
 },
 // 当用户选择了本地图片时触发 handleFileChange(event) {
 const file = event.target.files[0];
 if (file) {
 this.imgSrc = URL.createObjectURL(file);
 }
 },
 // 裁切图片时触发 handleCrop() {
 this.cropperDataUrl = this.$refs.cropper.getCroppedCanvas().toDataURL();
 }
 }
}

html<template>
 <div class="app">
 <!-- 本地图片选择器 -->
 <input type="file" ref="input" @change="handleFileChange" />
 <!-- 裁切按钮 -->
 <button @click="handleUploadClick">上传</button>
 <!-- Vue-Cropper 组件 -->
 <Cropper v-if="imgSrc"
 :src="imgSrc"
 ref="cropper"
 @crop="handleCrop"
 :aspectRatio="16 /9" // 自定义裁切图片比例 />
 <!-- 裁切后的图片预览 -->
 <div v-if="cropperDataUrl">
 <img :src="cropperDataUrl" alt="" />
 </div>
 </div>
</template>

<script>
import Cropper from 'vue-cropper';

export default {
 name: 'App',
 components: { Cropper },
 data() {
 return {
 imgSrc: '',
 cropperDataUrl: ''
 }
 },
 methods: {
 handleUploadClick() {
 this.$refs.input.click();
 },
 handleFileChange(event) {
 const file = event.target.files[0];
 if (file) {
 this.imgSrc = URL.createObjectURL(file);
 }
 },
 handleCrop() {
 this.cropperDataUrl = this.$refs.cropper.getCroppedCanvas().toDataURL();
 }
 }
}
</script>

<style scoped>
.app {
 width:100%;
 height:100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

input[type="file"] {
 display: none;
}
</style>