wang-image-clip

Using npm:

npm i wang-image-clip --save

params:

参数名|描述|类型|默认值 --|:--:|:--:|--: src|传入的图片地址|image|-- height|图片的高度(宽度将进行等比缩放)|number|500 clipHeight|裁剪区域初始高度|number|200 clipWidth|裁剪区域初始宽度|number|200 showPreview|是否显示预览区域|boolen|true showControls|是否显示操作栏|boolen|true

event

事件名|返回值 --|--: clipCallBack|裁剪后的图片

$ref api

clipImage: 手动触发裁剪，可用于用户自定义何时触发裁剪事件

attention

仅支持同域和设置了跨域的图片地址

example:

<template>
  <div id="app">
    <clip :src="require('./assets/logo.png')" />
  </div>
</template>

<script>
import clip from "wang-image-clip";
import "wang-image-clip/dist/wang-image-clip.css";

export default {
  name: 'app',
  components: {
    clip
  }
}
</script>