zhaoweimin/cropping-img

组件介绍

vue 图片裁剪功能

安装

npm install cropping-im -s

vue 调用

<template>
  <div class="hello"> 
      <cropping-img @onCropping="onCropping"/>
  </div>
</template>

<script>
import croppingImg from 'cropping-img'
export default {
  components: { croppingImg },
  methods:{
    onCropping(res) {
      console.log(res)
    }
  }
}
</script>

入参 props

参数	类型	默认	描述
width	string	100%	设置显示图片区域样式的width
height	string	auto	设置显示图片区域样式的height
hideBtn	boolea	false	是否显示按钮
btns	Object	["choose", "cropping", "export"]	choosex选择图片, cropping预览, export导出
btns

方法 action

方法名	作用	返回值
onCropping	生成截图	返回裁剪图的 base64 和 file

refs

方法名	参数	描述
setImage	图片路径(string/file/base64String)	设置裁剪图片

github

https://github.com/zhaoweimin/cropping-img