直播開發app，VUE圖片裁剪，打碼，旋轉功能

直播開發app，VUE圖片裁剪，打碼，旋轉功能

1，先下載外掛。

cnpm install image-mosaic -D   
 
cnpm install --save vue-cropper

2，在components目錄下建立一個imageEdit資料夾，資料夾下建立index.vue，index.vue中內容如下：

<template>
  <div>
    <el-dialog
      title=""
      :visible.sync="dialogImg"
      :close-on-click-modal="false"
      width="70%"
      top="5vh"
      :before-close="handleClose"
    >
      <div v-loading="isLoading" class="edit-img">
        <vueCropper
          ref="cropper"
          :img="editImgUrl"
          :info="false"
          :output-type="'png'"
          :info-true="true"
          :can-move="true"
          :can-scale="true"
          :can-move-box="true"
          :auto-crop-width="400"
          :auto-crop-height="400"
          :mode="'cover'"
          :center-box="true"
          :enlarge="2"
          :full="true"
          :max-img-size="200000"
          @imgLoad="imgLoadCrop"
        />
        <div v-if="isMosaic" class="tumo-img">
          <canvas id="canvas" />
        </div>
        <div class="button-group">
          <div class="button-item" @click="rotateHandle(1)">左旋90</div>
          <div class="button-item" @click="rotateHandle(2)">右旋90</div>
          <div class="button-item" @click="cropHandle">{{ indexTab==1?'裁 剪':'取消裁剪' }}</div>
          <div class="button-item" @click="mosaicHandle">{{ !isMosaic?'打 碼':'取消打碼' }}</div>
          <div class="button-item" @click="saveHandle">保 存</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
 
import { VueCropper } from 'vue-cropper'
import Mosaic from 'image-mosaic'
import { upLoad1 } from '@/api/files-management'
export default {
  components: {
    VueCropper
  },
  props: {
    dialogImg: {
      type: Boolean,
      default: () => false
    },
    imgPath: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      editImgUrl: '', // 編輯後的圖片
      indexTab: 1, // 1是裁剪，2是取消裁剪
      isMosaic: false, // 是否打碼
      isLoading: true
    }
  }

 以上就是直播開發app，VUE圖片裁剪，打碼，旋轉功能， 更多內容歡迎關注之後的文章