vue-cropper官網

鏈接：https://github.com/xyxiao001/vue-cropper

安裝：npm install vue-cropper 或者 yarn add vue-cropper

組件封裝CropperImage.vue

<template><div class="cropper-content"><div class="cropper-box"><div class="cropper"><vue-cropperref="cropper":img="option.img":outputSize="option.outputSize":outputType="option.outputType":info="option.info":canScale="option.canScale":autoCrop="option.autoCrop":autoCropWidth="option.autoCropWidth":autoCropHeight="option.autoCropHeight":fixed="option.fixed":fixedNumber="option.fixedNumber":full="option.full":fixedBox="option.fixedBox":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":centerBox="option.centerBox":height="option.height":infoTrue="option.infoTrue":maxImgSize="option.maxImgSize":enlarge="option.enlarge":mode="option.mode"@realTime="realTime"@imgLoad="imgLoad"></vue-cropper></div><!--底部操作工具按鈕--><div class="footer-btn"><div class="scope-btn"><label class="btn" for="uploads">選擇封面</label><input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="selectImg($event)"><el-button size="mini" type="danger" plain icon="el-icon-zoom-in" @click="changeScale(1)">放大</el-button><el-button size="mini" type="danger" plain icon="el-icon-zoom-out" @click="changeScale(-1)">縮小</el-button><el-button size="mini" type="danger" plain @click="rotateLeft">? 左旋轉</el-button><el-button size="mini" type="danger" plain @click="rotateRight">? 右旋轉</el-button></div><div class="upload-btn"><el-button size="mini" type="success" @click="uploadImg('blob')">上傳封面 <i class="el-icon-upload"></i></el-button></div></div></div><!--預覽效果圖--><div class="show-preview"><div :style="previews.div" class="preview"><img :src="previews.url" :style="previews.img"></div></div></div> </template><script> import { VueCropper } from 'vue-cropper' export default {name: "CropperImage",components: {VueCropper},props:['Name'],data() {return {name:this.Name,previews: {},option:{img: '', //裁剪圖片的地址outputSize: 1, //裁剪生成圖片的質量(可選0.1 - 1)outputType: 'jpeg', //裁剪生成圖片的格式（jpeg || png || webp）info: true, //圖片大小信息canScale: true, //圖片是否允許滾輪縮放autoCrop: true, //是否默認生成截圖框autoCropWidth: 230, //默認生成截圖框寬度autoCropHeight: 150, //默認生成截圖框高度fixed: true, //是否開啟截圖框寬高固定比例fixedNumber: [1.53, 1], //截圖框的寬高比例full: false, //false按原比例裁切圖片，不失真fixedBox: true, //固定截圖框大小，不允許改變canMove: false, //上傳圖片是否可以移動canMoveBox: true, //截圖框能否拖動original: false, //上傳圖片按照原始比例渲染centerBox: false, //截圖框是否被限制在圖片里面height: true, //是否按照設備的dpr 輸出等比例圖片infoTrue: false, //true為展示真實輸出圖片寬高，false展示看到的截圖框寬高maxImgSize: 3000, //限制圖片最大寬度和高度enlarge: 1, //圖片根據截圖框輸出比例倍數mode: '230px 150px' //圖片默認渲染方式}};},methods: {//初始化函數imgLoad (msg) {console.log("工具初始化函數====="+msg)},//圖片縮放changeScale (num) {num = num || 1this.$refs.cropper.changeScale(num)},//向左旋轉rotateLeft () {this.$refs.cropper.rotateLeft()},//向右旋轉rotateRight () {this.$refs.cropper.rotateRight()},//實時預覽函數realTime (data) {this.previews = data},//選擇圖片selectImg (e) {let file = e.target.files[0]if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {this.$message({message: '圖片類型要求：jpeg、jpg、png',type: "error"});return false}//轉化為bloblet reader = new FileReader()reader.onload = (e) => {let dataif (typeof e.target.result === 'object') {data = window.URL.createObjectURL(new Blob([e.target.result]))} else {data = e.target.result}this.option.img = data}//轉化為base64reader.readAsDataURL(file)},//上傳圖片uploadImg (type) {let _this = this;if (type === 'blob') {//獲取截圖的blob數據this.$refs.cropper.getCropBlob(async (data) => {let formData = new FormData();formData.append('file',data,"DX.jpg")//調用axios上傳let {data: res} = await _this.$http.post('/api/file/imgUpload', formData)if(res.code === 200){_this.$message({message: res.msg,type: "success"});let data = res.data.replace('[','').replace(']','').split(',');let imgInfo = {name : _this.Name,url : data[0]};_this.$emit('uploadImgSuccess',imgInfo);}else {_this.$message({message: '文件服務異常，請聯系管理員！',type: "error"});}})}},}, } </script><style scoped lang="scss"> .cropper-content{display: flex;display: -webkit-flex;justify-content: flex-end;.cropper-box{flex: 1;width: 100%;.cropper{width: auto;height: 300px;}}.show-preview{flex: 1;-webkit-flex: 1;display: flex;display: -webkit-flex;justify-content: center;.preview{overflow: hidden;border:1px solid #67c23a;background: #cccccc;}} } .footer-btn{margin-top: 30px;display: flex;display: -webkit-flex;justify-content: flex-end;.scope-btn{display: flex;display: -webkit-flex;justify-content: space-between;padding-right: 10px;}.upload-btn{flex: 1;-webkit-flex: 1;display: flex;display: -webkit-flex;justify-content: center;}.btn {outline: none;display: inline-block;line-height: 1;white-space: nowrap;cursor: pointer;-webkit-appearance: none;text-align: center;-webkit-box-sizing: border-box;box-sizing: border-box;outline: 0;-webkit-transition: .1s;transition: .1s;font-weight: 500;padding: 8px 15px;font-size: 12px;border-radius: 3px;color: #fff;background-color: #409EFF;border-color: #409EFF;margin-right: 10px;} } </style>

注意：裁剪組件的基礎配置option，小編這里配置了官方所給的所有基礎配置，大家可以按需配置。

新建Tailoring.vue 調用封裝好的組件:

這里我們先簡單說一下思路，通過按鈕觸發事件打開我們的剪裁窗口，選擇圖片，點擊上傳之后，將地址回調回來，拿到地址就可以處理我們的業務了，比如隨著表單一起將回調地址存入數據庫等等。

<template><div class="cropper-app"><el-form :model="formValidate" :rules="ruleValidate" ref="formValidate" label-width="100px" class="demo-ruleForm"><el-form-item label="封面上傳" prop="mainImage"><div class="list-img-box"><div v-if="formValidate.mainImage !== ''"><img :src="formValidate.mainImage" style='width:300px;height:150px' alt="自定義封面"></div><div v-else class="upload-btn" style="height: 120px;" @click="uploadPicture('flagImg')"><i class="el-icon-plus" style="font-size: 30px;"></i><span>封面設置</span></div></div><input type="hidden" v-model="formValidate.mainImage" placeholder="請添加封面"></el-form-item></el-form><!-- 剪裁組件彈窗 --><el-dialogtitle="裁切封面":visible.sync="cropperModel"width="950px"center><cropper-image:Name="cropperName"@uploadImgSuccess = "handleUploadSuccess"ref="child"></cropper-image></el-dialog><!--查看大封面--><el-dialogtitle="查看大封面":visible.sync="imgVisible"center><img :src="imgName" v-if="imgVisible" style="width: 100%" alt="查看"></el-dialog></div> </template><script> import CropperImage from "@/views/resmanage/CropperImage"; export default {name: "Tailoring",components: {CropperImage},data () {return {formValidate: {mainImage: '',},ruleValidate: {mainImage: [{required: true, message: '請上傳封面', trigger: 'blur'}],},//裁切圖片參數cropperModel:false,cropperName:'',imgName: '',imgVisible: false}},methods: {//封面設置uploadPicture(name){this.cropperName = name;this.cropperModel = true;},//圖片上傳成功后handleUploadSuccess (data){console.log(data)switch(data.name){case 'flagImg':this.formValidate.mainImage = 'http://ydfblog.cn/dfs/'+data.url;console.log('最終輸出'+data.name)break;}this.cropperModel = false;}} } </script> <style scoped>.upload-list-cover{position: absolute;top: 0;bottom: 0;left: 0;right: 0;display: flex;flex-wrap: wrap;justify-content: space-between;padding: 0 40px;align-items: center;background: rgba(0,0,0,.6);opacity: 0;transition: opacity 1s;}.cover_icon {font-size: 30px;}.upload-btn{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border: 1px solid #cccccc;border-radius: 5px;overflow: hidden;box-shadow: 0 0 1px #cccccc;}.upload-btn:hover {border: 1px solid #69b7ed;}.upload-btn i{margin: 5px;} </style>

原文地址： https://blog.csdn.net/qq_41107231/article/details/109725839

---

<template><div class="updateAvatar1"><el-button type="primary" @click="visible = true">修改頭像</el-button><el-dialogtitle="修改頭像":visible.sync="visible"width="800":before-close="handleClose"><el-row><el-col :span="12" style="height: 300px;"><vue-cropperref="cropper":img="options.img":info="true":autoCrop="options.autoCrop":autoCropWidth="options.autoCropWidth":autoCropHeight="options.autoCropHeight":fixedBox="options.fixedBox"@realTime="realTime"></vue-cropper><div class="btnS"><el-uploadref="uploadCropper":before-upload="beforeAvatarUpload":show-file-list="false"action="/"style="margin-right: 10px;"><el-button type="primary" size="small">上傳頭像</el-button></el-upload><el-tooltip class="item" effect="dark" content="向左旋轉" placement="top"><el-button size="small" @click="rotateLeft"><i class="el-icon-refresh-left"></i></el-button></el-tooltip><el-tooltip class="item" effect="dark" content="向右旋轉" placement="top"><el-button size="small" @click="rotateRight"><i class="el-icon-refresh-right"></i></el-button></el-tooltip><el-tooltip class="item" effect="dark" content="放大" placement="top"><el-button size="small" @click="changeScale(1)"><i class="el-icon-plus"></i></el-button></el-tooltip><el-tooltip class="item" effect="dark" content="縮小" placement="top"><el-button size="small" @click="changeScale(-1)"><i class="el-icon-minus"></i></el-button></el-tooltip></div></el-col><el-col :span="12" style="height: 300px;"><div class="upload-preview"><img :src="previews.url" :style="previews.img" v-show="previews.url"/></div></el-col></el-row><span slot="footer" class="dialog-footer"><el-button @click="visible = false" size="small">取 消</el-button><el-button type="primary" :loading="loading" @click="submitUpdate" size="small">確 定</el-button></span></el-dialog></div> </template><script>import { VueCropper } from 'vue-cropper'export default {name: 'updateAvatar1',components: {VueCropper},methods: {// 實時預覽函數realTime(data) {this.previews = data},handleClose() {},beforeAvatarUpload(file) {// 此處的上傳file有多種處理方式console.log(file)let type = file.type.split('/')[1];if (this.uploadAccept.indexOf(type) > -1) {// 上傳允許的類型之內const reader = new FileReader()// 把Array Buffer轉化為blob 如果是base64不需要// 轉化為base64reader.readAsDataURL(file)reader.onload = () => {this.options.img = reader.result}} else {this.$message.warning("您上傳的圖片格式不符，請重新上傳")}},changeScale (num) {this.$refs.cropper.changeScale(num)},rotateLeft () {this.$refs.cropper.rotateLeft()},rotateRight () {this.$refs.cropper.rotateRight()},submitUpdate() {this.loading = truethis.$refs.cropper.getCropData((base64) => {this.uploadImg(base64);});},uploadImg() {// 發送ajax請求}},data() {return {visible: true,options: {img: '', //裁剪圖片的地址info: true, //裁剪框的大小信息outputSize: 0.8, // 裁剪生成圖片的質量outputType: '', // 裁剪生成圖片的格式canScale: false, // 圖片是否允許滾輪縮放autoCrop: true, //是否默認生成截圖框autoCropWidth: 200, //默認生成截圖框寬度autoCropHeight: 200,fixedBox: true, // 固定截圖框大小 是否允許改變fixed: true, //是否開啟截圖框寬高固定比例fixedNumber: [1, 1], //截圖框的寬高比例original: false, // 上傳圖片按照原始比例渲染centerBox: false, // 截圖框是否被限制在圖片里面infoTrue: true // true 為展示真實輸出圖片寬高 false 展示看到的截圖框寬高},previews: {},loading: false,fileList: [],uploadAccept: ['jpeg', 'jpg', 'png']}}} </script><style lang="scss" scoped> /deep/{.el-dialog{width: 840px;}.el-dialog__body{width: 800px;}.el-dialog__header{border-bottom: 1px solid #eaeaea;} } .btnS{display: flex;padding-top: 20px;.i{position: relative;font-size: 12px;} } .upload-preview {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;position: absolute;top: 50%;transform: translate(50%, -50%);width: 200px;height: 200px;border-radius: 50%;box-shadow: 0 0 4px #eaeaea;overflow: hidden;img {width: 100%;height: 100%;} } </style>

原文地址：https://blog.csdn.net/qq_43219422/article/details/106317574

---

總結

以上是生活随笔為你收集整理的使用 “vue-cropper“进行图片裁剪的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。