大廠技術(shù)  高級(jí)前端  Node進(jìn)階

點(diǎn)擊上方 程序員成長(zhǎng)指北，關(guān)注公眾號(hào)

回復(fù)1，加入高級(jí)Node交流群

高效實(shí)現(xiàn)需求的方法，就是避免重復(fù)造輪子。圖片裁剪的插件也不少，這里我選擇 vue-cropper，原因是功能強(qiáng)大、簡(jiǎn)單易上手。話不多說(shuō)，上效果圖：

效果圖

安裝

npm install vue-cropper

使用

import { VueCropper } from 'vue-cropper'

代碼實(shí)現(xiàn)

以 element-ui + vue-cropper 為例實(shí)現(xiàn)頭像裁剪

src/App.vue

<template>
  <div>
    <el-button @click="dialogVisible = true">上傳頭像</el-button>
    <avatar-cropper :dialogVisible.sync="dialogVisible" @closeAvatarDialog="closeAvatarDialog"></avatar-cropper>
  </div>
</template>

<script>
  import avatarCropper from '@/components/avatarCropper'
  export default {
    components: {
      avatarCropper
    },
    data() {
      return {
        dialogVisible: false
      }
    },
    methods: {
      closeAvatarDialog(data) {
 console.log(data)
        this.dialogVisible = false
      }
    }
  }
</script>

src/components/avatarCropper.vue

<template>
  <el-dialog
    title="裁剪頭像"
    :visible.sync="dialogVisible"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeDialog"
    width="600px"
  >
    <div class="avatar-container">
      <!-- 待上傳圖片 -->
      <div v-show="!options.img">
        <el-upload
          class="upload"
          ref="upload"
          action=""
          :on-change="upload"
          accept="image/png, image/jpeg, image/jpg"
          :show-file-list="false"
          :auto-upload="false"
        >
          <el-button slot="trigger" size="small" type="primary" ref="uploadBtn">
            選擇圖片
          </el-button>
        </el-upload>
        <div>支持jpg、png格式的圖片，大小不超過(guò)5M</div>
      </div>
      <!-- 已上傳圖片 -->
      <div v-show="options.img" class="avatar-crop">
        <vueCropper
          v-if="dialogVisible"
          class="crop-box"
          ref="cropper"
          :img="options.img"
          :autoCrop="options.autoCrop"
          :fixedBox="options.fixedBox"
          :canMoveBox="options.canMoveBox"
          :autoCropWidth="options.autoCropWidth"
          :autoCropHeight="options.autoCropHeight"
          :centerBox="options.centerBox"
          :fixed="options.fixed"
          :fixedNumber="options.fixedNumber"
          :canMove="options.canMove"
          :canScale="options.canScale"
        ></vueCropper>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <div class="reupload" @click="reupload">
        <span v-show="options.img">重新上傳</span>
      </div>
      <div>
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="getCrop">確 定</el-button>
      </div>
    </span>
  </el-dialog>
</template>

<script>
import { VueCropper } from 'vue-cropper'
export default {
  components: {
    VueCropper
  },
  name: 'avatarCropper',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // vueCropper組件 裁剪配置信息
      options: {
        img: '', // 原圖文件
        autoCrop: true, // 默認(rèn)生成截圖框
        fixedBox: false, // 固定截圖框大小
        canMoveBox: true, // 截圖框可以拖動(dòng)
        autoCropWidth: 200, // 截圖框?qū)挾?br>        autoCropHeight: 200, // 截圖框高度
        fixed: true, // 截圖框?qū)捀吖潭ū壤?br>        fixedNumber: [1, 1], // 截圖框的寬高比例
        centerBox: true, // 截圖框被限制在圖片里面
        canMove: false, // 上傳圖片不允許拖動(dòng)
        canScale: false // 上傳圖片不允許滾輪縮放
      }
    }
  },

  methods: {
    // 讀取原圖
    upload(file) {
      const isIMAGE = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png'
      const isLt5M = file.raw.size / 1024 / 1024 < 5
      if (!isIMAGE) {
        this.$message({
          showClose: true,
          message: '請(qǐng)選擇 jpg、png 格式的圖片',
          type: 'warning'
        })
        return false
      }
      if (!isLt5M) {
        this.$message({
          showClose: true,
          message: '圖片大小不能超過(guò) 5MB',
          type: 'warning'
        })
        return false
      }
      let reader = new FileReader()
      reader.readAsDataURL(file.raw)
      reader.onload = e => {
        this.options.img = e.target.result // base64
      }
    },
    // 獲取截圖信息
    getCrop() {
      // 獲取截圖的 base64 數(shù)據(jù)
      // this.$refs.cropper.getCropData((data) => {
      //   this.$emit('closeAvatarDialog', data)
      //   this.closeDialog()
      // });
      // 獲取截圖的 blob 數(shù)據(jù)
      this.$refs.cropper.getCropBlob(data => {
        this.$emit('closeAvatarDialog', data)
        this.closeDialog()
      })
    },
    // 重新上傳
    reupload() {
      this.$refs.uploadBtn.$el.click()
    },
    // 關(guān)閉彈框
    closeDialog() {
      this.$emit('update:dialogVisible', false)
      this.options.img = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  .reupload {
    color: #409eff;
    cursor: pointer;
  }
}
.avatar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 560px;
  height: 400px;
  background-color: #f0f2f5;
  margin-right: 10px;
  border-radius: 4px;
  .upload {
    text-align: center;
    margin-bottom: 24px;
  }
  .avatar-crop {
    width: 560px;
    height: 400px;
    position: relative;
    .crop-box {
      width: 100%;
      height: 100%;
      border-radius: 4px;
      overflow: hidden;
    }
  }
}
</style>

總結(jié)

裁剪完成之后可以獲取到 base64 和 blob 數(shù)據(jù)，然后上傳至后端。vue-cropper 還有眾多屬性和方法，用起來(lái)都很方便，有興趣的同學(xué)可以實(shí)現(xiàn)一下實(shí)時(shí)預(yù)覽。

文檔地址：github.com/xyxiao001/v…^[1]

看完不要忘了點(diǎn)個(gè)贊呦，聽(tīng)說(shuō)點(diǎn)贊的來(lái)年升職加薪，愛(ài)情事業(yè)雙豐收??

參考資料