裁剪图片vue-cropper实例 基础功能 预览 获取裁剪后图片数据

在项目中使用到了裁剪图片功能，通过vue-croppe实现

安装和引入

# npm 安装
npm install vue-cropper
# yarn 安装
yarn add vue-cropper

项目中引用引入，这里我的项目是 vue2

// 组件中
import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper
}
// 全局
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

配置项（常用）

实例

html

 <el-tab-pane label="病理结果展示" name="third" style="pointer-events: auto;">
            <el-row :gutter="20">
              <el-col :span="11">
                <el-upload
                  action="#"
                  :http-request="ringrequestUpload"
                  :show-file-list="false"
                  :before-upload="ringbeforeUpload"
                  accept=" .jpeg, .jpg, .png, .JPG, .JPEG, .PNG"
                  :on-change="changeImgClick"
                  :on-success="handleAvatarSuccess"
                >
                  <el-button type="primary" size="small">原图片设置</el-button>
                </el-upload>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="4" class="imagesStyle">
                <h4>病理结果图片：</h4>
                <img
                  :src="ringoptions.img"
                  alt=""
                  class="oImg"
                  @click="changeImageUrl"
                />
              </el-col>
              <!-- <div @click="tailoring">裁剪</div> -->
              <el-col :span="14" style="text-align: center" class="oSpan">
                <h4>切割图片操作</h4>
                <vue-cropper
                  ref="ringcropper"
                  :img="ringoptions.img"
                  :info="true"
                  :autoCrop="ringoptions.autoCrop"
                  :fixedBox="ringoptions.fixedBox"
                  :canScale="ringoptions.canScale"
                  :original="ringoptions.original"
                  :canMove="ringoptions.canMove"
                  :infoTrue="ringoptions.infoTrue"
                  :outputSize="ringoptions.outputSize"
                  :autoCropWidth="ringoptions.autoCropWidth"
                 :autoCropWidth="ringoptions.autoCropWidth"
                  :autoCropHeight="ringoptions.autoCropHeight"
                  :canMoveBox="ringoptions.canMoveBox"
                  @realTime="ringrealTime"
                  style="
                    border: 1px dashed #000;
                    width: 100%;
                    height: 100%;
                    min-height: 1000px;
                    background-image: none;
                  "
                /> 
                <p>
                  <span style="color: #d9001b; font-size: 14px"
                    >说明：选择需要切割的图片，用鼠标拖拽选取切割区域范围，点击确定按钮，图片修改完成。</span
                  >
                </p>
                <div>
                  <el-button type="primary" @click="cancleOperation">取 消</el-button>
                  <el-button type="primary" @click="ringuploadImg()">确 定</el-button>
                </div>
              </el-col>
              <el-col :span="6">
                <h4>修改后的图片：</h4>
                <div class="avatar-upload-ringpreview">
                  <!-- 预览图片 --> 
                  <div :style="{ width:'350px', height: '300px'}" >
                    <div v-html="previewHTML" v-if="imageUrl"></div>
                  </div>
                  <!-- 截图结果展示 -->
                  <img :src="imageBase64" :style="screenshotViews.img" @click="modifyImageUrl" class="imgStyle"/>  
                </div>
                <br>
                <div v-if="screenshotResults">
                  <h4>最新截图结果：</h4>
                  <div class="avatar-upload-ringpreview">
                    <!-- 图片预览 -->
                    <img :src="RecentScreenshots" :style="ringpreviews.img" alt="" class="RecentScreenImage">
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>

• js

 // 弹出层标题
      ringoptions: {
        img: null, //裁剪图片的地址
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 400, // 默认生成截图框宽度
        autoCropHeight: 300, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        outputType: "png", // 固定截图框大小 不允许改变
        size: 1,
        outputSize: 1, // 裁剪生成图片的质量 0.1 - 1
        full: false,
        canMove: false, //上传图片是否可以移动 默认true
        original: false, // 上传图片按照原始比例渲染	false	true | false
        canMoveBox: true, //截图框能否拖动	true	true | false
        high: true,
        infoTrue: true, // 为展示真实输出图片宽高 false 展示看到的截图框宽高	false	true | false
        downImg: "#",
        fixed: true, //是否开启截图框宽高固定比例
        canScale: false, // 图片是否允许滚轮缩放 默认true
        maxImgSize: 3000, // 图片最大像素
        fixedNumber: [1, 1], // 截图框的宽高比例 [宽度, 高度]
        }
      ringpreviews: {}, //预览控件
      screenshotViews: {}, // 截图前

• script

 // 上传预处理
    ringbeforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.$modal.msgError(
          "文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。"
        );
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          this.ringoptions.img = reader.result;
        };
      }
    },
    // 上传图片
    ringrequestUpload(obj) {
        let fd = new FormData();
        fd.append('file', obj.file); //参数
        fd.append("IsVal", "true")
        fd.append("appUnid", this.data.unid); 
        UploadImage(fd).then((res) => {
            if (res.code === 200) {
              this.ImageLis()
              this.$message.success("原图上传成功");
            }
        })
    },
    // 确定按钮方法，点击确定，对应的截图发生改变
    ringuploadImg() {
      if (this.ringoptions.img) {
        this.$refs.ringcropper.getCropBlob((data) => {
          let formData = new FormData(); 
          let file = this.blobToFile(data, "filename.jpg");
          formData.append("file", file);
          formData.append("IsVal", "false");
          formData.append("appUnid", this.data.unid);
          UploadImage(formData).then((res) => {
            if (res.code === 200) { 
              this.$message.success("上传成功");
              this.ImageLis() // 截图实时更新接口
            }
          });
        });
      }
    },
    // /实时预览
    ringrealTime(data) { 
        this.previewHTML = data.html
        this.ringpreviews = data; 
    },

注意事项：

• 1.手写input需要使用一个FormData对象来转换格式，而vant的file是已经转换好的
• 2.这个转换过的格式，就是一个对象，直接将整个对象当成data参数传递即可，具体情况看项目接口而定
• 3.传递过后，后台会返回数据，其中的data.path就是修改后的图片的网址链接
• 4.有些项目如果后台没有处理的话，需要我们再次将这个图片地址，传递给修改用户信息的接口，已达到修改图片的目的