vue-cropper

下载 `npm install vue-cropper`

引入

import Vue from 'vue'
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

封装

`components`文件夹新建文件 `cropper.vue`

vue

<template>
  <a-modal v-model="visible" title="裁剪" :width="1000">
    <template slot="footer">
      <a-button @click="handleCancel"> 取消 </a-button>
      <a-button type="primary" @click="handleOk"> 确认 </a-button>
    </template>
    <div class="cropper">
      <div>
        <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"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          @realTime="realTime"
        ></vueCropper>
      </div>
      <div v-html="previews"></div>//预览
    </div>
  </a-modal>
</template>
<script>
import BMF from 'browser-md5-file'
const bmf = new BMF()

export default {
  props: {
    fixedNumber: {//自定义截图框比例
      type: Array,
      default:()=>[1,1]
    },
  },
  data() {
    return {
      visible: false,
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: 'jpeg', // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        canMove: true,
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: this.fixedNumber[0] * 100, // 默认生成截图框宽度
        autoCropHeight: this.fixedNumber[1] * 100, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: this.fixedNumber, // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
      fileName: null,
      previews: null,
    }
  },
  methods: {
    realTime(data) {
      this.previews = data.html
    },
    openModal(file) {
      //file: 父组件传入的文件对象
      this.visible = true
      let _this = this
      let temp = window.URL.createObjectURL(new Blob([file]))
      // get filename suffix
      const _arr = file.name.split('.')
      const suffix = _arr[_arr.length - 1]
      this.option.img = temp
      bmf.md5(file, (err, md5) => {
        _this.fileName = `${md5}.${suffix}`
      })
    },
    handleOk() {
      let _this = this
      this.$refs.cropper.getCropBlob(data => {//内置方法,获取截图的 blob 数据
        _this.$emit("updateImg",{ fileName: _this.fileName, blob: data })//点击确认后将文件名和图片的blob数据传入父组件中
      })
      this.visible = false
    },
    handleCancel() {
      this.visible = false
    },
  },
}
</script>
<style scoped lang='less'>
.cropper {
  display: flex;
  justify-content: space-around;
  div {
    width: 400px;
    height: 400px;
  }
  & > :last-child {
    margin: 0 auto;
    background-color: #666666;
    position: relative;
    ::v-deep .show-preview { /*这里style是scope模式 要用v-deep样式穿透样式才会生效*/
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>

使用

vue

<template>
  <div class="upload-wrapper">
    <div class="upload-container">
      <div class="preview-img">
        <a-spin tip="正在上传..." :spinning="loading">
          <img :src="logoUrl" v-if="logoUrl" />
        </a-spin>
      </div>
      <div class="mask">
        <div @click="showModal">
          <a-icon class="pre-icon" type="eye"></a-icon>
          <span class="pre-text">预览</span>
          <a-modal v-model="visible" title="预览" :footer="null" :centered="true" @ok="showModal">
            <img :src="logoUrl" v-if="logoUrl" width="100%" />
          </a-modal>
        </div>
        <div @click="$refs.inputFile.click()">
          <a-icon class="icon" type="plus" />
          <span class="text">点击上传</span>
        </div>
      </div>
    </div>
    <div class="name">
      <span>园区LOGO - 小</span>
      <span style="font-size: 12px">推荐尺寸：32 x 32</span>
    </div>

    <!-- upload input -->
    <input ref="inputFile" type="file" @change="cropperUpload" style="display: none" />
    <cropper-modal ref="cropperModal" @updateImg="updateImg" :fixedNumber="[1, 1]" />
  </div>
</template>

<script>
import { getOssSignature } from '@/api/upload'
import { editClientInfo } from '@/api/user'
import cropperModal from '@/components/cropper'

export default {
  name: 'UploadLogoMini',

  components: {
    cropperModal,
  },

  data() {
    return {
      logoUrl: '',
      loading: false,
      visible: false,
    }
  },

  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
  },

  methods: {
    startUpload(file, fileName) {//开始上传
      this.loading = true
      const _this = this
      getOssSignature().then(res => {
        const obj = res.result
        const formData = new FormData()
        formData.append('OSSAccessKeyId', obj.accessId)
        formData.append('policy', obj.policy)
        formData.append('signature', obj.signature)
        formData.append('key', `${obj.dir}${fileName}`)
        formData.append('success_action_status', '200') // 指定返回的状态码
        formData.append('file', file)
        const url = `${obj.maintainHost}/${obj.dir}${random}${fileName}`
        axios
          .post(obj.host, formData, {
            headers: { 'Content-Type': 'multipart/form-data' },
          })
          .then(res => {
            editClientInfo({ clientId: _this.$ls.get('clientId'), appMiNiImg: url })
            _this.logoUrl = url
            _this.$store.commit('UPDATE_APP_MINI_IMG', url)
          })
          .finally(() => {
            _this.loading = false
          })
      })
    },
    cropperUpload(e) {
      const file = e.target.files[0]
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      if (!isJpgOrPng) {
        this.$message.error('图片格式不正确，请上传格式为 .jpg/.jpeg/.png 的图片！')
      }
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('图片大小超过5MB！')
      }
      let temp = window.URL.createObjectURL(new Blob([file]))
      this.src = temp
      this.$refs.cropperModal.openModal(file)//将文件对象传入cropper组件中
      this.$refs.inputFile.value = null;
    },
    showModal() {
      this.visible = !this.visible
    },
    updateImg(fileObj) {
      //接收子组件传入的参数,执行上传
      this.startUpload(fileObj.blob, fileObj.fileName)
    },
  }
}
</script>

props

名称	功能	默认值	可选值
img	裁剪图片的地址	空	`url 地址`, `base64`, `blob`
outputSize	裁剪生成图片的质量	`1`	0.1 ~ 1
outputType	裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	`jpeg`, `png`, `webp`
info	裁剪框的大小信息	`true`	`true`, `false`
canScale	图片是否允许滚轮缩放	`true`	`true`, `false`
autoCrop	是否默认生成截图框	`false`	`true`, `false`
autoCropWidth	默认生成截图框宽度	容器的 80%	0 ~ max
autoCropHeight	默认生成截图框高度	容器的 80%	0 ~ max
fixed	是否开启截图框宽高固定比例	`false`	`true`, `false`
fixedNumber	截图框的宽高比例	`[1, 1]`	`[ 宽度 , 高度 ]`
full	是否输出原图比例的截图	`false`	`true`, `false`
fixedBox	固定截图框大小	不允许改变	`false`
canMove	上传图片是否可以移动	`true`	`true`, `false`
canMoveBox	截图框能否拖动	`true`	`true`, `false`
original	上传图片按照原始比例渲染	`false`	`true`, `false`
centerBox	截图框是否被限制在图片里面	`false`	`true`, `false`
high	是否按照设备的dpr 输出等比例图片	`true`	`true`, `false`
infoTrue	true 为展示真实输出图片宽高 `false` 展示看到的截图框宽高	false	`true`, `false`
maxImgSize	限制图片最大宽度和高度	`2000`	0 ~ max
enlarge	图片根据截图框输出比例倍数	`1`	0 ~ max
mode	图片默认渲染方式	`contain`	`contain` , `cover`, `100px`, `100%` auto

内置方法和属性

通过 this.$refs.cropper 调用

属性

属性	说明
this.$refs.cropper.cropW	截图框宽度
this.$refs.cropper.cropH	截图框高度

方法

方法	说明
this.$refs.cropper.startCrop()	开始截图
this.$refs.cropper.stopCrop()	停止截图
this.$refs.cropper.clearCrop()	清除截图
this.$refs.cropper.changeScale()	修改图片大小正数为变大负数变小
this.$refs.cropper.getImgAxis()	获取图片基于容器的坐标点
this.$refs.cropper.getCropAxis()	获取截图框基于容器的坐标点
this.$refs.cropper.goAutoCrop	自动生成截图框函数
this.$refs.cropper.rotateRight()	向右边旋转90度
this.$refs.cropper.rotateLeft()	向左边旋转90度

可用回调方法

@realTime 实时预览事件
@imgMoving 图片移动回调函数
@cropMoving 截图框移动回调函数
@imgLoad 图片加载的回调, 返回结果 success, error

获取截图内容

获取截图的 base64 数据

this.$refs.cropper.getCropData(data => {
  // do something
  console.log(data)  
})

获取截图的 blob 数据

this.$refs.cropper.getCropBlob(data => {
  // do something
  console.log(data)  
})

vue-cropper ​

下载 npm install vue-cropper ​

引入 ​

封装 ​

components文件夹新建文件 cropper.vue ​

使用 ​

props ​

内置方法 和 属性 ​

可用回调方法 ​

vue-cropper

下载 `npm install vue-cropper`

引入

封装

`components`文件夹新建文件 `cropper.vue`

使用

props

内置方法和属性

可用回调方法