vue-range-2d v0.0.1

vue 2D坐标选择及图片裁剪工具

参数

<!-- 基于.vue组件化开发 -->
<vue-range-2d
  ref="range"
  :imgUrl="option.img"
  :rangeMaxWidth="1920"
  :rangeMaxHeight="1080"
  :isFullRange="true"
></vue-range-2d>

<!-- 直接使用html开发需注意html不支持驼峰规则 -->
<vue-range-2d
  ref="range"
  :img-url="option.img"
  :range-max-width="1920"
  :range-max-height="1080"
  :is-full-range="true"
></vue-range-2d>

方法

<vue-range-2d
  ref="range"
  :imgUrl="option.img"
  :rangeMaxWidth="1920"
  :rangeMaxHeight="1080"
  :isFullRange="true"
></vue-range-2d>

获取选区四条边界坐标(原点为左上角)

this.$refs.range.getRange()
// return {top, right, bottom, left}

获取选区图片blob(异步函数)

// 使用回调
this.$refs.range.getImageBlob((blob) => {

})
// 支持promise
this.$refs.range.getImageBlob().then((res) => {

})

获取选区图片DataURL

// 使用回调
this.$refs.range.getImageData()