直播开发app，VUE图片裁剪，打码，旋转功能

1，先下载插件。

<br>cnpm install image-mosaic -D   <br> <br>cnpm install --save vue-cropper  

2，在components目录下创建一个imageEdit文件夹，文件夹下创建index.vue，index.vue中内容如下：

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