vue项目添加Cropper.js实现裁剪功能

1.安装cropper.js   npm install cropper
2.在vue项目的页面中引入 

import Cropper from "cropperjs";

import "./image-editor/cropper.min.css"; //需要自己找
3.html页面
<div class="image-editor">
   

  <el-form ref="myFormRef" :model="myForm" :rules="myFormRules" label-width="50px">
      <el-form-item  label="照片" prop="picture">
          

           <el-input type="text" v-model="myForm.picture" disabled v-show="false"/> <!--绑定一个隐藏作用域-->
           

                 <div>

                    <div style=" 300px; height: 300px">

                      <div class="cropper">

                        <img id="cropimg1" :src="myForm.picture" alt=""/>

                      </div>

                    </div>

                    <div class="image-editor-con1-btn-con margin-top-10">

                      <input

                        type="file"

                        accept="image/png, image/jpeg, image/gif, image/jpg"

                        @change="handleChange1"

                        id="fileinput1"

                        class="fileinput"

                      />

                      <label class="filelabel" for="fileinput1">选择图片</label>

                      <span

                        ><el-button

                          type="primary"

                          size="mini"

                          class="ml10"

                          @click="rotateRight"

                          ><i class="el-icon-refresh-right"></i></el-button

                      ></span>

                      <span

                        ><el-button

                          type="primary"

                          size="mini"

                          class="ml10"

                          @click="rotateLeft"

                          ><i class="el-icon-refresh-left"></i></el-button

                      ></span>

                      <span

                        ><el-button

                          type="primary"

                          size="mini"

                          class="ml10"

                          @click="upload"

                          >上传</el-button

                        ></span

                      >

                    </div>

                  </div>

      </el-form-item>
  </el-form>

</div>
4.逻辑实现
mounted() {

    //初始化cropper1

    this.$nextTick(function () {

        let img1 = document.getElementById("cropimg1");

        this.cropper1 = new Cropper(img1, {

          dragMode: "move",

          preview: "#preview1",

          aspectRatio: 0.735, //设置裁剪框为固定的宽高比

          restore: false,

          center: false,

          highlight: false,

          cropBoxMovable: false,

          toggleDragModeOnDblclick: false,

        });

      });

},

handleChange1(e) {

      let file = e.target.files[0];

      let reader = new FileReader();

      reader.onload = () => {

          this.cropper1.replace(reader.result);

          reader.onload = null;

      };

      reader.readAsDataURL(file);

 },

rotateRight() {

      if (document.getElementById("fileinput1").files[0]) {

        this.cropper1.rotate(30);

      } else {

        this.cropper1.rotate(30);

      }

   },

 rotateLeft() {

      if (document.getElementById("fileinput1").files[0]) {

        this.cropper1.rotate(-30);

      } else {

        this.cropper1.rotate(-30);

      }

   },

base64toFile(dataurl, filename = "file") {

      let arr = dataurl.split(",");

      let mime = arr[0].match(/:(.*?);/)[1];

      let suffix = mime.split("/")[1];

      let bstr = atob(arr[1]);

      let n = bstr.length;

      let u8arr = new Uint8Array(n);

      while (n--) {

        u8arr[n] = bstr.charCodeAt(n);

      }

      return new File([u8arr], `${filename}.${suffix}`, {

        type: mime,

      });

  },

upload() {

    let file = this.cropper1.getCroppedCanvas().toDataURL();  //获取裁剪后的图片，此时返回的是base64位
    

    let data1 = this.base64toFile(file);  //base64位转化成file文件
    

     if (data1.size / 1024 / 1024 > 1) {   //data1.size返回的单位是字节

        this.$message.error("上传的图片必须小于1M!");

        return;

      }

      //传递的参数是FormData对象

      let param = new FormData(); // 创建form对象

      

      param.append("file", data1); // 将文件存入file下面

      param.append("id", "22");

      

      axios({

        method: "post",

        url: _this.uploadUrl,

        data: param,

        headers: {

          "Content-Type": "multipart/form-data",   //并且header中的Content-type必须是multipart/form-data类型

        },

      })

}

5.样式

.image-editor{

    .cropper{

        box-sizing: border-box;

        border: 1px solid #DCDFE6;

         100%;

        height: 100%;

        img{

            max-height: 100%;

        }

    }

    .fileinput{

        display: none;

    }

    .filelabel{

        display: inline-block;

        line-height: 1;

        white-space: nowrap;

        cursor: pointer;

        background: #409EFF;

        border: 1px solid #DCDFE6;

        color: white;

        font-size: 12px;

        font-family: sans-serif;

        text-align: center;

        box-sizing: border-box;

        outline: 0;

        margin: 0;

        transition: .1s;

        font-weight: 500;

        padding: 9px 15px 10px;

        margin: 0 2px 0 6px;

        border-radius: 4px;

        &:hover{

            background: #5cadff;

            border: 1px solid #5cadff;

            transition: all .2s;

        }

    }

    .image-editor-con1 {

        height: 300px;

        .image-editor-con1-preview-con {

             100% !important;

            height: 200px !important;

            border: 1px solid #c3c3c3;

        }

        #preview1{

             100%;

            height: 100%;

            overflow: hidden;

        }

    }

}

上述方法实现了裁剪功能！
参考文档： https://www.cnblogs.com/eightFlying/p/cropper-demo.html