二次封装vue-cropper实现图片裁剪

原创

已于 2023-10-11 15:32:20 修改 · 584 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-09-20 15:24:12 首次发布

文章介绍了如何在Vue项目中使用vue-cropper插件实现图片裁剪功能，包括处理Blob对象、base64转换、文件上传以及预览。还讨论了如何在已有遮罩层的情况下优化图片预览效果。

业务场景

需要上传图片实现图片裁剪，固定裁剪框的大小，让裁剪出来图标是正方形。但是考虑到有些图标是长方形，裁剪后图标可能裁剪不全，可以填充底色且让裁剪框可以超出图片，对与超出裁剪框的位置给他填充颜色。

点击+号可以放大，点击-号可以缩小。也可以进行图片的左旋右旋。颜色那里用的iview的颜色选择器，选择完颜色后，可以对超出裁剪框的颜色进行填充底色。点击🔍可以实现裁剪图片的预览。这里是基于我之前写的博客js实现下载本地文件_Humanideal的博客-优快云博客中图片预览的实现，有需要可以去看之前的博客。vue-cropper源码是自己写了个modal遮罩层，写了一些样式。但是对于我的业务场景，已经打开了两个遮罩层了，再使用一个遮罩层图层太过复杂，且图片不突出，效果不明显，所以通过a标签预览的时候另外打开个弹窗进行图片预览。

Blob对象格式

Blob对象是二进制数据，但它是类似文件对象的二进制数据。file继承blob。

实现

基于iview的upload上传组件和vue-cropper - npm实现的。

先下载vue-cropper

npm i vue-cropper或yarn add vue-cropper。这里用的是最新版0.6.4。

父组件

<template>
  <Modal>
        <Upload
          v-if="!isUpload && !formData.iconUrl"
          :before-upload="handleUpload"
          action=""
        >
          <Button icon="ios-cloud-upload-outline">
            上传图片
          </Button>
        </Upload>

        <div
          v-else
          style="display: flex; align-items: center;"
        >
          <img
            ref="img"
            :src="formData.iconUrl"
            style="width: 100px; height: 100px; margin-right: 10px;"
          >
          <Button
            type="primary"
            ghost
            @click="cropperEvent"
          >
            裁剪图片
          </Button>
        </div>
      
    <Modal
      v-model="modal"
      title="图片裁剪"
      @on-ok="ok"
      @on-cancel="can