vue项目实战 vueCropper 仿微信头像任意区域截取图片，上传到腾讯云保存

在package.json中添加

"vue-cropperjs": "4",

后在控制台执行：npm install

ImageCropper.vue

<template><div v-if="src"><!-- Vue Cropper区域 --><el-row class="cropper-wrapper" v-if="src"><el-col :span="24"><vue-cropper v-if="src":key="cropperKey"ref="cropper" :src="src":style="{ width: width + 'px', height: height + 'px' }"@ready="onReady":dragMode="'move'":viewMode="1":cropBoxResizable="false"/></el-col></el-row><el-row class="button-row" v-if="src"><el-col :span="24"><el-button class="button-soft-orange" @click="cropImage" icon="el-icon-scissors">裁剪图像</el-button><el-button class="button-soft-blue" @click="downloadImage" icon="el-icon-download">下载图像</el-button><el-button class="button-soft-red" @click.prevent="zoom(0.2)" icon="el-icon-zoom-in" /><el-button class="button-soft-red" @click.prevent="zoom(-0.2)" icon="el-icon-zoom-out" /><el-button class="button-soft-yellow" @click.prevent="move(-10, 0)" icon="el-icon-arrow-left" /><el-button class="button-soft-yellow" @click.prevent="move(10, 0)" icon="el-icon-arrow-right" /><el-button class="button-soft-yellow" @click.prevent="move(0, -10)" icon="el-icon-arrow-up" /><el-button class="button-soft-yellow" @click.prevent="move(0, 10)" icon="el-icon-arrow-down" /><el-button class="button-soft-blue" ref="flipX" @click.prevent="flipX" icon="el-icon-sort" /><el-button class="button-soft-blue" ref="flipY" @click.prevent="flipY" icon="el-icon-sort" /><el-button class="button-soft-green" @click.prevent="rotate(90)" icon="el-icon-refresh-right" /><el-button class="button-soft-green" @click.prevent="rotate(-90)" icon="el-icon-refresh-left" /><el-button class="button-soft-gray" @click.prevent="reset" icon="el-icon-refresh" /></el-col></el-row><el-row v-if="croppedImageUrl"><el-col :style="{ width: width + 'px' }" ><el-card><h3>裁剪后预览：</h3><div class="preview-and-buttons"><div class="image-preview-wrapper"><img class="cropped-image-preview" :src="croppedImageUrl" alt="Cropped Image" /></div><div class="upload-button-col"><el-button class="button-soft-green" @click="uploadImageToCos" icon="el-icon-upload">上传到腾讯云</el-button><el-button class="button-soft-gray" @click="resetImage">关闭裁剪区和预览区</el-button></div></div></el-card></el-col></el-row></div></template><script>import VueCropper from "vue-cropperjs"import "cropperjs/dist/cropper.css"import { Button, Row, Col, Card } from "element-ui"import COS from 'cos-js-sdk-v5'export default {components: {VueCropper,'el-button': Button,'el-row': Row,'el-col': Col,'el-card': Card},props: {width: {type: Number,default: 600},height: {type: Number,default: 600},centerWidth: {type: Number}},data() {return {src: '', // 初始 src 为空，等待用户选择本地图片cropperKey: 0, // 用于强制重新渲染 croppercroppedImageUrl: '',uploadedImageUrl: '', // 用于存储上传后返回的 URLflipXValue: 1,flipYValue: 1,cos: null // 用于存储腾讯云COS实例}},mounted() {this.cos = new COS({SecretId: '', // 写自己的腾讯云 SecretIdSecretKey: '' // 写自己的腾讯云 SecretKey});},methods: {onReady() {// 重置画布和裁剪框，确保初始图片位置和大小如重置后的效果this.reset();},onImageChange(event) {const file = event.target.files[0];if (file) {this.src = URL.createObjectURL(file);this.cropperKey++; // 更新 key 强制重新渲染 vue-cropperthis.$emit('imageChanged'); // 通知父组件图片已更换}},cropImage() {this.$refs.cropper.cropper.getCroppedCanvas().toBlob((blob) => {this.croppedImageUrl = URL.createObjectURL(blob);});},downloadImage() {this.$refs.cropper.cropper.getCroppedCanvas().toBlob((blob) => {const link = document.createElement('a');link.href = URL.createObjectURL(blob);link.download = 'cropped_image.png';link.click();});},zoom(scale) {this.$refs.cropper.cropper.zoom(scale);},move(offsetX, offsetY) {this.$refs.cropper.cropper.move(offsetX, offsetY);},flipX() {this.flipXValue = this.flipXValue === 1 ? -1 : 1;this.$refs.cropper.cropper.scaleX(this.flipXValue);},flipY() {this.flipYValue = this.flipYValue === 1 ? -1 : 1;this.$refs.cropper.cropper.scaleY(this.flipYValue);},rotate(degrees) {this.$refs.cropper.cropper.rotate(degrees);},reset() {// 先重置裁剪框和画布确保其他变换恢复到初始状态this.$refs.cropper.cropper.reset();// 获取图片原始尺寸const imageData = this.$refs.cropper.cropper.getImageData();// 计算新的高度const newHeight = (this.centerWidth / imageData.naturalWidth) * imageData.naturalHeight;// 设置画布大小并居中this.$refs.cropper.cropper.setCanvasData({width: this.centerWidth,height: newHeight,left: (this.width - this.centerWidth) / 2,  // 居中画布top: (this.height - newHeight) / 2  // 居中画布});// 设置裁剪框的大小和居中位置this.$refs.cropper.cropper.setCropBoxData({left: (this.width - 300) / 2,  // 居中裁剪框top: (this.height - 200) / 2,   // 居中裁剪框width: 300,height: 200});this.flipXValue = 1;this.flipYValue = 1;},resetImage() {this.src = ''; // 重置 src，使用户可以重新选择图片this.cropperKey++; // 更新 key 强制重新渲染 vue-cropperthis.$emit('imageChanged'); // 通知父组件图片已重置this.croppedImageUrl = ''},uploadImageToCos() {this.uploadedImageUrl = '';this.$emit('uploadStarted'); // 通知父组件上传开始，清空输入框this.$refs.cropper.cropper.getCroppedCanvas().toBlob((blob) => {const timestamp = new Date().getTime(); // 使用时间戳生成唯一文件名const fileName = `cropped_image_${timestamp}.png`; // 生成唯一文件名const file = new File([blob], fileName, { type: "image/png" });this.cos.uploadFile({Bucket: '', // 写自己的腾讯云 BucketRegion: '', // 写自己的腾讯云 Region Key: fileName, // 使用唯一文件名Body: file,SliceSize: 1024 * 1024, // 分块大小，单位为字节，这里设置为1MB}, (err, data) => {if (err) {this.$notify.error({title: '上传失败',message: '图片上传到腾讯云失败，请重试。',duration: 1000});this.$emit('uploadFailed', err); // 通知父组件上传失败} else {this.uploadedImageUrl = data.Location;this.$notify.success({title: '上传成功',message: '图片成功上传到腾讯云。',duration: 1000});this.$emit('uploaded', this.uploadedImageUrl); // 通知父组件上传成功，并发送 URL}});});},openFileInput() {this.$refs.fileInput.click(); // 模拟点击文件输入控件}}}</script><style scoped>.image-select-wrapper {margin-bottom: 20px;}.button-soft-green {background-color: #a5d6a7 !important;border-color: #a5d6a7 !important;color: #fff !important;}.button-soft-orange {background-color: #ffcc80 !important;border-color: #ffcc80 !important;color: #fff !important;}.button-soft-yellow {background-color: #f3c672b4 !important;border-color: #f3c672b4 !important;color: #fff !important;}.button-soft-blue {background-color: #bbd0f8 !important;border-color: #bbd0f8 !important;color: #fff !important;}.button-soft-gray {background-color: #cfd8dc !important;border-color: #cfd8dc !important;color: #fff !important;}.button-soft-red {background-color: #ff8a80 !important;border-color: #ff8a80 !important;color: #fff !important;}.cropper-wrapper {margin-bottom: 20px;}.button-row {margin-bottom: 20px;}.cropped-image-preview {width: 100%;height: 100%;object-fit: cover;}.upload-button-col {display: flex;gap: 10px; /* 水平按钮间距 */align-items: center;}.preview-and-buttons {display: flex;align-items: center;gap: 20px; /* 图片与按钮组之间的间距 */}.image-preview-wrapper {width: 300px!important;/* height: 200px!important; */border: 1px solid #dcdcdc;display: flex;align-items: center;justify-content: center;}.image-preview-wrapper img {max-width: 100%;/* max-height: 100%; */object-fit: cover;}</style>

TestView.vue

<template><div :style="{ width: parentWidth + 'px' }"><div class="input-wrapper" :style="{ width: inputWrapperWidth + 'px' }"><el-button @click="openFileInput" style="margin-right: 10px;">选择图片</el-button><el-input :value="uploadedImageUrl" placeholder="上传后的URL" readonly/><input type="file" ref="fileInput" @change="onFileChange" accept="image/*" style="display: none" /></div><ImageCropper ref="imageCropper"@uploaded="handleUploaded" @uploadFailed="handleUploadFailed" @imageChanged="clearUploadedImageUrl"@uploadStarted="clearUploadedImageUrl"@getLocalImageUrl="handleGetLocalImageUrl":width="cropperWidth":height="cropperHeight":center-width="setCenterWidth"style="margin-top: 10px;"/></div>
</template><script>
import ImageCropper from '@/components7/ImageCropper.vue'export default {components: {ImageCropper},data() {return {uploadedImageUrl: '', // 用于存储上传成功后的 URLparentWidth: 1000, // 父组件宽度inputWrapperWidth: 1000, // input-wrapper宽度cropperWidth: 1000, // ImageCropper宽度cropperHeight: 1000, // ImageCropper高度setCenterWidth:900,localImageUrl: '' // 本地图片}},methods: {handleUploaded(url) {this.uploadedImageUrl = url;},handleUploadFailed(err) {console.error('上传失败:', err);},clearUploadedImageUrl() {this.uploadedImageUrl = '';},openFileInput() {this.$refs.fileInput.click();},onFileChange(event) {const file = event.target.files[0];if (file) {this.$refs.imageCropper.onImageChange(event);}},handleGetLocalImageUrl(url) {this.localImageUrl = url;console.log("this.localImageUrl:",this.localImageUrl)}}
}
</script><style scoped>
.input-wrapper {display: flex;align-items: center;
}
.input-wrapper .el-input {flex: 1;
}
</style>