vue-cropper

将图片缩放到设定的尺寸

重新上传图片时，需重新将图片转化为图片路径

将 base64 转化为图片文件

<el-dialog
    title="图片裁切"
    class="cropper-dialog"
    :close-on-click-modal="false"
    :visible="dialogVisible"
    center
    @close="close"
    <div class="cropper-wrap">
        class="cropper-box"
        :style="cropperStyle"
        <vue-cropper
          ref="cropper"
          :img="option.img"
          :output-size="option.size"
          :output-type="option.outputType"
          :info="option.info"
          :full="option.full"
          :canScale="option.canScale"
          :can-move="option.canMove"
          :can-move-box="option.canMoveBox"
          :fixed="option.fixed"
          :fixed-box="option.fixedBox"
          :original="option.original"
          :auto-crop="option.autoCrop"
          :auto-crop-width="option.autoCropWidth"
          :auto-crop-height="option.autoCropHeight"
          :center-box="option.centerBox"
          :high="option.high"
          :info-true="option.infoTrue"
          :max-img-size="option.maxImageSize"
          :enlarge="option.enlarge"
          :mode="option.mode"
          :maxImgSize="option.maxImgSize"
          @realTime="realTime"
      <div class="preview-box">
        <div class="preview-title">
          <span>预览</span>
          <span @click="upload" class="preveiw-upload">重新上传</span>
        <input
          ref="upload"
          type="file"
          style=" clip:rect(0 0 0 0);"
          accept="image/png, image/jpeg, image/jpg"
          @change="uploadImg"
          :style="previewStyle"
          class="preview-img"
          <div :style="preview.div">
              :style="preview.img"
              :src="preview.url"
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="finish" :loading="loading">确认</el-button>
  </el-dialog>
// 裁剪组件的基础配置option
  option: {
    img: '', // 裁剪图片的地址
    outputSize: 1, // 裁剪生成图片的质量
    outputType: 'png', // 裁剪生成图片的格式
    full: true, // 是否输出原图比例的截图
    info: true, // 图片大小信息
    canScale: true, // 图片是否允许滚轮缩放
    autoCrop: true, // 是否默认生成截图框
    autoCropWidth: 200, // 默认生成截图框宽度
    autoCropHeight: 150, // 默认生成截图框高度
    canMove: true, // 上传图片是否可以移动
    fixedBox: true, // 固定截图框大小 不允许改变
    fixed: false, // 是否开启截图框宽高固定比例
    canMoveBox: true, // 截图框能否拖动
    original: false, // 上传图片按照原始比例渲染
    centerBox: false, // 截图框是否被限制在图片里面
    height: true,
    infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
    enlarge: 1, // 图片根据截图框输出比例倍数
    mode: 'container', // 图片默认渲染方式
    maxImgSize: 375 // 限制图片最大宽度和高度
复制代码

将 base64 图片转化为图片文件

由于后台只能识别 jpg 、 png 图片格式，需要将 base64 图片转化为图片文件

// 将base64转换为文件
dataURLtoFile (dataurl, filename) {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let bstr = atob(arr[1])
  let len = bstr.length
  let u8arr = new Uint8Array(len)
  while (len--) {
    u8arr[len] = bstr.charCodeAt(len)
  return new File([u8arr], filename, { type: mime })
复制代码

vue-cropper 相关配置

Attribute