vue-cropper头像裁剪

2021-11-04

前言

需求是：当上传的图片需要有一定的比例时，需要上传前将图片裁剪成相应的比例。

vue-cropper使用方法：

安装：npm install vue-cropper

使用：

1、局部使用

import { VueCropper } from ‘vue-cropper’

2、全局使用

在main.js中引用

import VueCropper from ‘vue-cropper’

Vue.use(VueCropper)

具体使用：

<!-- vueCropper 剪裁图片实现-->
<el-upload :data="uploadType" :auto-upload="false" :show-file-list="false" list-type="picture-card" ref="upload" class="upload-style" name="file" :headers="headers" :action="fileAddr" :on-change="(file,fileList)=>{return changeFile(file,fileList,item.id)}">
    <el-image v-if="item.logo" :src="item.logo" class="avatar" fit="cover"></el-image>
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

<el-dialog title="图片剪裁" :visible.sync="cropperVisible" append-to-body>
   <div class="cropper-content">
      <div class="cropper" style="text-align:center">
      <vueCropper ref="cropper" 
       	:img="option.img" 
        :outputSize="option.size" 
        :outputType="option.outputType"                
        :info="true" 
        :full="option.full" 
        :canMove="option.canMove" 
        :canMoveBox="option.canMoveBox"
        :original="option.original" 
        :autoCrop="option.autoCrop" 
        :fixed="option.fixed"
        :fixedNumber="option.fixedNumber" 
        :centerBox="option.centerBox" 
        :infoTrue="option.infoTrue"
        :fixedBox="option.fixedBox">
      </vueCropper>
    </div>
  </div>
  <div slot="footer" class="dialog-footer">
     <el-button @click="cropperVisible = false">取 消</el-button>
     <el-button type="primary" @click="finish" :loading="loading">确认</el-button>
  </div>
</el-dialog>

js：

export default {
        name: 'Index',
        data() {
            return {
                uploadType: {
                    type: 0
                },
                fileAddr: axios.$context+'/b/v1/resource/attachment',
                headers: {
                    authorization: this.$store.getters.token
                },
                cropperVisible: false,
                option: {
                    img: '', // 裁剪图片的地址
                    info: true, // 裁剪框的大小信息
                    outputSize: 1, // 裁剪生成图片的质量
                    outputType: 'jpeg', // 裁剪生成图片的格式
                    canScale: false, // 图片是否允许滚轮缩放
                    autoCrop: true, // 是否默认生成截图框
                    // autoCropWidth: 300, // 默认生成截图框宽度
                    // autoCropHeight: 200, // 默认生成截图框高度
                    fixedBox: false, // 固定截图框大小 不允许改变
                    fixed: true, // 是否开启截图框宽高固定比例
                    fixedNumber: [1, 1], // 截图框的宽高比例
                    full: true, // 是否输出原图比例的截图
                    canMoveBox: true, // 截图框能否拖动
                    original: false, // 上传图片按照原始比例渲染
                    centerBox: false, // 截图框是否被限制在图片里面
                    infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
                },
                loading: false
            }
        },
        methods: {
            // 获取文件后缀名
            extname(filename) {
                if(!filename||typeof filename!='string'){
                    return false
                };
                let a = filename.split('').reverse().join('');
                let b = a.substring(0,a.search(/\./)).split('').reverse().join('');
                return b
            },
            // 获取编辑头像id
            changeFile(file,fileList,id){
                this.editId = id
                let extArr = ['jpg','png','jpeg']
                let extension = false
                extArr.forEach((element) => {
                    if (this.extname(file.name).toLowerCase() === element.toLowerCase()) {
                        extension = true
                        return
                    }
                })
                const isLt10M = file.size / 1024 / 1024 < 10;
                if (!extension) {
                    this.$message.error('请上传图片!');
                    return
                }
                if (!isLt10M) {
                    this.$message.error('上传图片大小不能超过10MB!');
                    return
                }
                //关键
                this.$nextTick(() => {
                    this.option.img = file.url
                    this.cropperVisible = true
                })
            },
            // 点击裁剪，这一步是可以拿到处理后的地址
            finish() {
                this.$refs.cropper.getCropData((data) => {
                    console.log(this.imgType)
                    let uploadParams = {
                        type: 0,
                        image_base64: data,
                        extension: 'png'
                    }
                    uploadApi.uploadCropperImg(uploadParams).then((res) => {
                        if (res.code == 200) {
                            let params = {
                                type: 'logo',
                                logo: res.data.url
                            }
                            console.log(params)
                            //具体操作
                            this.cropperVisible = false
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg,
                            });
                        }
                    }).catch((error) => {
                        console.log(error)
                    });
                })
            }
        }
    }