vue-img-cropper

基于Vue2.0的移动端图片裁剪组件

Demo

Install

npm install vue-img-cropper -S

Example

<vue-img-cropper
  ref="cropper"
  :height="800"
  :width="800"
  @cutImg="handleCutImg"
>
  <div class="cut-btn">Click Me</div>
</vue-img-cropper>

<img v-if="base64Data"
  ref="img"
  :src="base64Data">

import VueImgCropper from "vue-img-cropper"
Vue.component(VueImgCropper.name, VueImgCropper)

export default {
  data() {
    ...
    base64Data: null,
    ...
  }
  methods: {
    ...
    handleCutImg(data) {
      this.base64Data = data

      // or do other things such as upload
      const formData = new FormData()
      const binary = atob(data.split(',')[1])
      const fileType = data.split(';')[0].split(':')[1]
      const array = []
      for (let i = 0; i < binary.length; i += 1) {
        array.push(binary.charCodeAt(i))
      }
      formData.append('file', new Blob([new Uint8Array(array)], { type: fileType }))
      ...
    },
    ...
  }
}

点击 <div class="cut-btn">Click Me</div> 会打开相册／相机；也可以调用组件的 getImg 方法来打开相册／相机

this.$refs.cropper.getImg()

Attribute

| 参数| 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | height | 可选，裁剪后图片的高度（单位px） | Number | 500 | | width | 可选，裁剪后图片的宽度（单位px） | Number | 500 | | maxSize | 可选，图片最大尺寸(单位：b) | Number | Number.MAX_VALUE | | maxScale | 可选，图片最大的放大倍数 | Number | 4 | | compressionRatio | 可选，图片压缩比例，范围为：0～1 | Number | 0.92 | | footerHeight | 可选，裁剪页面底部栏的高度（单位px） | Number | window.innerWidth * 0.1375 | | confirmBtnText | 可选，底部栏确认按钮文案 | String | '选取' | | cancelBtnText | 可选，底部栏取消按钮文案 | String | '取消' |

Event

| 事件名称 | 说明 | 回调参数 | | --- | --- | --- | | cutImg | 确认裁剪时触发 | base64格式的图片数据 | | oversize | 图片体积超过maxSize时触发 | Object: { fileSize, maxSize } ；(fileSize、maxSize为 Number 类型的数据，单位：b) | | showLoading | 加载时触发 | -- | | hideLoading | 加载完成后触发 | -- | | showError | ErrorMsg, String | '***' |

Slot

| 名称 | 说明 | | --- | --- | | （默认） | 触发打开相机/相册的按钮 |

更新日志

v1.4.3

• bug fix: 修复confirmBtnText、cancelBtnText反了的问题

v1.4.1

• 优化文档

v1.4.0

• 增加属性：confirmBtnText、confirmBtnText
• 优化文档，增加 Demo 链接

v1.3.0

• 删除 exif-js 依赖
• 增加属性：maxSize
• 增加事件：oversize