vue使用cropperjs裁剪图片

1.安装

npm install cropperjs

2.引入

在页面中进行引入

import Cropper from "cropperjs";
// import "@/css/cropper.min.css";
import "cropperjs/dist/cropper.css";

 

3.实例

html ：创建一个Img来作为裁剪框的容器

        <div class="contentCenter">
          <!-- 裁剪框 -->
          <div class="left">
            <div class="cropper">
              <img ref="cropimg" alt />
            </div>
          </div>
        </div>

js

 created() {
    this.$nextTick(() => {
      this.getCropper();
    });
  },
  methods: {
    getCropper() {
      let img = this.$refs.cropimg;
      this.cropper = new Cropper(img, {
        dragMode: "move", // 定义cropper的拖拽模式
        preview: "#preview", // 添加额外的元素(容器)以供预览
        restore: false, // 在调整窗口大小后恢复裁剪的区域
        center: false, // 裁剪框在图片正中心
        highlight: true, // 在裁剪框上方显示白色的区域(突出裁剪框)
        cropBoxMovable: true, // 是否通过拖拽来移动剪裁框
        toggleDragModeOnDblclick: false, // 当点击两次时可以在“crop”和“move”之间切换拖拽模式
        movable: true,
        viewMode: 1,
      });
    },
}

如果是使用本地上传的图片，并进行裁剪，下面是完整实例

<template>
  <div>
    <img
      :src="afterImg"
      alt=""
      style="width: 400px; height: 400px; float: right"
    />
    <div style="" class="uploadPic">
      <div class="content">
        <div class="contentTop">
          <input
            type="file"
            accept="image/png, image/jpeg, image/jpg, image/bmp"
            @change="handleChange"
            id="fileinput"
            class="fileinput"
            style="display: none"
          />
          <label class="filelabel" for="fileinput">&nbsp;选择图片</label>
        </div>
        <div class="contentCenter">
          <!-- 裁剪框 -->
          <div class="left">
            <div class="cropper">
              <img ref="cropimg" alt />
            </div>
          </div>
        </div>
        <div class="contentBottom">
          <div class="left fl">
            <el-input-number
              v-model="num"
              controls-position="right"
              @change="valChange"
              :min="-360"
              :max="360"
            ></el-input-number>
            <!-- <el-button @click="handleturnLeft">向左</el-button>
            <el-button @click="handleTurnRight">向右</el-button> -->
            <el-button @click="handleBigger">放大</el-button>
            <el-button @click="handleSmaller">缩小</el-button>
            <el-button @click="handleReset">重置</el-button>
            <el-button @click="sureSava">裁剪</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Cropper from "cropperjs";
// import "@/css/cropper.min.css";
import "cropperjs/dist/cropper.css";
export default {
  data() {
    return {
      onOff: false,
      returnPicPath: [],
      cropper: {},
      //   cropedImage: "",
      afterImg: "",
      num: 0,
      //   option: {
      //     showCropedImage: false,
      //   },
      imgData: {
        accept: "image/jpeg, image/png, image/jpg, image/bmp",
      },
    };
  },
  created() {
    this.$nextTick(() => {
      this.getCropper();
    });
  },
  methods: {
    getCropper() {
      let img = this.$refs.cropimg;
      this.cropper = new Cropper(img, {
        dragMode: "move", // 定义cropper的拖拽模式
        preview: "#preview", // 添加额外的元素(容器)以供预览
        restore: false, // 在调整窗口大小后恢复裁剪的区域
        center: false, // 裁剪框在图片正中心
        highlight: true, // 在裁剪框上方显示白色的区域(突出裁剪框)
        cropBoxMovable: true, // 是否通过拖拽来移动剪裁框
        toggleDragModeOnDblclick: false, // 当点击两次时可以在“crop”和“move”之间切换拖拽模式
        movable: true,
        viewMode: 1,
      });
    },
    sureSava() {
      this.afterImg = this.cropper
        .getCroppedCanvas({
          imageSmoothingQuality: "high",
        })
        .toDataURL("image/jpeg");
    },
    handleChange(e) {
      let file = e.target.files[0];
      let reader = new FileReader();
      reader.onload = () => {
        this.cropper.replace(reader.result);
        // console.log(reader.result, 1111);
        reader.onload = null;
      };
      reader.readAsDataURL(file);
    },
    handleturnLeft() {
      if (document.getElementById("fileinput").files[0]) {
        this.cropper.rotate(-1);
      }
    },
    handleTurnRight() {
      if (document.getElementById("fileinput").files[0]) {
        this.cropper.rotate(1);
      }
    },
    handleBigger() {
      if (document.getElementById("fileinput").files[0]) {
        this.cropper.zoom(0.1);
      }
    },
    handleSmaller() {
      if (document.getElementById("fileinput").files[0]) {
        this.cropper.zoom(-0.1);
      }
    },
    handleReset() {
      if (document.getElementById("fileinput").files[0]) {
        this.cropper.reset();
      }
    },
    valChange(val) {
      if (document.getElementById("fileinput").files[0]) {
        this.cropper.setData({ rotate: val });
      }
    },
  },
};
</script>
<style scoped lang="scss">
.uploadPic {
  .head {
    width: 100%;
    height: 34px;
    background: rgba(234, 235, 236, 1);
    box-shadow: 0px 2px 0px 0px rgba(204, 204, 204, 0.5);

    .title {
      text-align: left;
      line-height: 34px;
      padding-left: 11px;
    }

    .close {
      display: block;
      position: absolute;
      width: 15px;
      height: 15px;
      top: 11px;
      right: 11px;
      background-size: 15px 15px;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
    }
  }

  .content {
    padding: 14px;
    width: 100%;
    float: left;
    .contentTop {
      width: 100%;
      height: 50px;

      .filelabel {
        width: 90px;
        height: 30px;
        display: inline-block;
        border: 1px solid #2d8cf0;
        border-radius: 2px;
        cursor: pointer;
        color: white;
        font-size: 14px;
        text-align: center;
        transition: all 0.2s;
        line-height: 30px;
        font-weight: 400;
        background: #00aaa4;
        box-sizing: border-box;

        &:hover {
          background: #00bdb8;
          border: 1px solid #00bdb8;
          transition: all 0.2s;
        }
      }
    }

    .contentCenter {
      width: 100%;
      display: flex;
      .left {
        width: 800px;
        height: 500px;

        .cropper {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border: 1px solid #c3c3c3;
          width: 100%;
          height: 100%;

          img {
            max-height: 100%;
          }
        }
      }

      .right {
        width: 150px;
        border: 1px solid #c3c3c3;

        #preview {
          width: 150px;
          overflow: hidden;
        }
      }
    }

    .contentBottom {
      padding-top: 20px;
      width: 100%;

      .left {
        .btn {
          display: inline-block;
          background-color: #00aaa4;
          width: 30px;
          height: 30px;
          background: rgba(0, 170, 164, 1);
          border: 1px solid #2d8cf0;
          border-radius: 2px;
          cursor: pointer;
          text-align: center;
          transition: all 0.2s;
          margin-right: 10px;

          &:hover {
            background: #00bdb8;
            border: 1px solid #00bdb8;
            transition: all 0.2s;
          }
        }
      }

      .right {
        .btn {
          display: inline-block;
          width: 90px;
          height: 30px;
          background: rgba(0, 170, 164, 1);
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 30px;
          text-align: center;
          margin-right: 33px;
          cursor: pointer;

          &:hover {
            background: #00bdb8;
            transition: all 0.2s;
          }
        }
      }
    }
  }
}
</style>

本插件官网https://fengyuanchen.github.io/cropper/

插件文档https://fengyuanchen.github.io/cropperjs/v2/zh/guide.html