vue-imgclip

vue-imageClip

vue图片上传预览裁剪组件，支持移动端放大缩小平移。

在线预览

在线预览地址

二维码预览

使用

安装

$ npm install vue-imgclip

引入

import VimageClip from 'vue-imgclip'

注册组件后创建<VimageClip />标签

  // script
  components: {
    VimageClip
  }

  // html
  <VimageClip @imageClipper="handelclip"/>

方法

图片裁剪: @imageClipper="handelclip" 图片裁剪方法，回调中可以获取裁剪完成base64和图片原始信息。

  methods: {
    handelclip(data) {
      console.log(data);
    }
  }

组件参数

<VimageClip
  width="300px"
  height="300px"
  backgroundColor="#ff6633"
  :hd=false
  :control="true"
  :buttonValue='{ clipText: "裁剪", clipClass: "clip-button"}'
  @imageClipper="handelclip"
/>