vic

vue-img-cropper

基于Vue的移动端图片裁剪组件

Showing:

Popularity

Downloads/wk

1

GitHub Stars

8

Maintenance

Last Commit

1yr ago

Contributors

4

Package

Dependencies

0

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

vue-img-cropper

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

Demo

Edit Vue Template

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)Number500
width可选,裁剪后图片的宽度(单位px)Number500
maxSize可选,图片最大尺寸(单位:b)NumberNumber.MAX_VALUE
maxScale可选,图片最大的放大倍数Number4
compressionRatio可选,图片压缩比例,范围为:0~1Number0.92
footerHeight可选,裁剪页面底部栏的高度(单位px)Numberwindow.innerWidth * 0.1375
confirmBtnText可选,底部栏确认按钮文案String'选取'
cancelBtnText可选,底部栏取消按钮文案String'取消'

Event

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

Slot

名称说明
(默认)触发打开相机/相册的按钮

更新日志

v1.4.3

  • bug fix: 修复confirmBtnTextcancelBtnText反了的问题

v1.4.1

  • 优化文档

v1.4.0

  • 增加属性:confirmBtnTextconfirmBtnText
  • 优化文档,增加 Demo 链接

v1.3.0

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial