Vue2组件、功能插件实例运用 - vue-cropper(图片裁剪)

vue-cropper

简介：一个优雅的图片裁剪插件。就一句话，没得更多的废话

官网：https://github.com/xyxiao001/vue-cropper

1、组件的安装

　　npm安装

npm install vue-cropper --save-dev

　　yarn安装

yarn add vue-cropper    --save-dev

2、使用

　　2.1 主页面图片选择(element-ui上传组件)


<el-upload
  class="upload-demo"
  ref="upload"
  action=""
  drag
  :auto-upload="false"
  :multiple="false"
  :limit="1"
  :show-file-list="false"
  :on-change="changeFile"
>
  <i class="el-icon-upload">i>
  <div class="el-upload__text">点击上传div>
  <div class="el-upload__tip">支持绝大多数图片格式，单张图片最大支持5MBdiv>
el-upload>

// changeFile方法
/**
 * 选择图片及限制图片大小
 */
changeFile(file, fileList) {
  const isLt5M = file.size / 1024 / 1024 < 5
  if (!isLt5M) {
    this.$message.error('上传文件大小不能超过 5MB!')
    return false
  }
  this.fileInfo = file
  // 图片选择好后，将图片数据转换成Blob本地地址并赋值对应参数后，最后显示图片裁剪框
  this.$nextTick(() => {
    this.dialogTitle = '基于vue的图片裁剪'
    this.dialogWidth = '500'
    this.dialogPar = {
      imgUrl: URL.createObjectURL(file.raw), // 裁剪组件无法直接访问图片文件信息，故将文件信息转成本地Blob数据地址，让裁剪组件可以直接访问
      fileInfo: file
    }
    this.dialogTemplate = 'imageCropper' // 本地封装的图片裁剪弹出窗组件
  })
},

　　2.2 图片裁剪弹出窗组件

　　组件的具体使用参照官方文档 https://github.com/xyxiao001/vue-cropper，vue2项目内全局引用 和 组件内引用 用法不一样

　　本次Demo采用组件内引入，组件的具体封装，各部分代码如下：

　　2.2.1 template模板：


<div class="el-col el-col-24">
  <div class="cropper-w">
    <div class="cropper text-align-c">
      <VueCropper
        ref="cropper"
        :img="option.img"
        :outputSize="option.size"
        :outputType="option.outputType"
        :info="true"
        :full="option.full"
        :canMove="option.canMove"
        :canMoveBox="option.canMoveBox"
        :original="option.original"
        :autoCrop="option.autoCrop"
        :fixed="option.fixed"
        :fixedNumber="option.fixedNumber"
        :centerBox="option.centerBox"
        :infoTrue="option.infoTrue"
        :fixedBox="option.fixedBox"
      >VueCropper>
    div>
  div>
  <div class="el-col el-col-24 flex-layout btn-w">
    <el-button type="success" @click.stop="rotateLeft">向左旋转el-button>
    <el-button type="info" @click.stop="rotateRight">向右旋转el-button>
    <el-button type="primary" @click.stop="getCropData">获取base64数据el-button>
    <el-button type="primary" @click.stop="getCropBlob">获取blob数据el-button>
  div>
div>

　　2.2.2 配套样式：

　　2.2.3 组件引用及功能函数：

　　2.3 裁剪好的图片 文件上传

　　在 2.2介绍的组件中 我们已经裁剪出我们需要的图片，并通过 $emit方法 将对应的数据上传到了父组件(主页面)中，此时就需要调用上传接口将图片信息上传到对应的服务器了，从而更新对应的所需图片数据。

/**
 * 根据子组件上传值，控制Dialog 对话框显隐
 * @param {Object} data：子组件(图片裁剪)上传到父组件数据

 * 例: {state: 控制状态(默认关闭:false)}
 */
receiveEmitPar(data) {
  this.dialogTemplate = ''
  if (data && data.imgUrl) {
    this.previewImgUrl = data.imgUrl  // 本地预览地址
    this.fileInfo.raw = data.fileData // 由于文件上传(包括文件和图片)http request统一封装为读取raw属性，故此处将子组件转换好的file对象赋值给raw属性
    this.$http.vueCropper.uploadPublicFile(this.fileInfo).then(res => {
      this.serverAddressImgUrl = res.realUrl  // 上传后返回的服务器地址 图片预览
    })
  }
  this.$refs.upload.uploadFiles = []
}

  上传返回的服务器图片地址

  本地预览和上传后服务器图片地址预览

3、将 Blob数据类型转成File类型，base64编码数据 转成File类型

上文中因为服务端文件上传接口统一接收file对象，所以裁剪后的图片数据不管是 blob数据类型 还是 base64编码数据，都要转成file对象才能上传。而这里面不管是将 blob数据类型直接转成file对象，还是将 base64编码数据先转成 blob数据类型再转成file对象，都绕不开 File()构造函数。

File()构造器 创建新的 File 对象实例，语法：

var myFile = new File(bits, name[, options]);

4、总结

总的来说 vue-cropper 是一款很优秀的图片裁剪组件，可以让我们在日常开发中涉及到一些图片裁剪需求时减少很大工作量；但美中不足的是，该款组件只能裁剪出正方形或长方形的图片【虽然后面可以用样式 border-radius: 50% 让图片显示成圆形】，但有时候有些奇葩产品就是要直接裁剪成圆形，这个时候就比较难搞了，又不得不重新造轮子。

最后，非常感谢这些封装插件的大佬，正是这些轮子的问世，使得前端开发减少了不知多少工作量，也让这些功能看起来更高大上更美观了。

Vue2全家桶

相关

标签