ImgCropper 图片裁剪

基础用法

<template>
  <div>
    <plv-img-cropper ref="cropper" :img="url"></plv-img-cropper>
    <plv-button @click="getCropData">getCropData</plv-button>
    <plv-button @click="getCropBlob">getCropBlob</plv-button>
    <plv-button @click="getCropperData">getCropperData</plv-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        url: '//liveimages.videocc.net/uploaded/images/2020/09/fquactsfwq.png'
      };
    },

    methods: {
      async getCropData() {
        const data = await this.$refs.cropper.getCropData();
        console.log(data);
      },
      async getCropBlob() {
        const data = await this.$refs.cropper.getCropBlob();
        console.log(data);
      },
      async getCropperData() {
        const data = await this.$refs.cropper.getCropperData();
        console.log(data);
      },
    }
  };
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
img	图片资源	String Blob	-	-
cropperWidth	裁剪容器宽度	Number	-	470
cropperHeight	裁剪容器高度	Number	-	270
full	是否输出原图比例的截图	Boolean	-	true
canScale	图片是否允许滚轮缩放	Boolean	-	false
autoCrop	默认生成截图框	Boolean	-	true
canMove	上传图片是否可以移动	Boolean	-	false
canMoveBox	截图框能否拖动	Boolean	-	true
centerBox	截图框是否被限制在图片里面	Boolean	-	true
fixed	是否开启截图框宽高固定比例	Boolean	-	true
fixedNumber	截图框的宽高比例	Array	-	[1, 1]
autoCropWidth	裁剪框默认宽度	Number	-	0
autoCropHeight	裁剪框默认高度	Number	-	0
autoCropMultiple	默认裁剪框占比	Number	-	1

Methods

方法名	说明	参数
getCropData	获取截图的base64数据	-
getCropBlob	获取截图的blob数据	-
getCropperData	获取截图相对原图的位置数据	-