vueCropper使用教程

vueCropper使用教程

1、使用步骤

1.1、安装 vue-cropper

npm install vue-cropper

main.js里面使用
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

组件内使用
import { VueCropper } from 'vue-cropper'
components: {
	VueCropper
}

1.2、基本使用方法

<!--外层容器包裹并设置宽高-->
<div style="width:100%;height:500px">
  <vue-cropper autoCrop img="https://shnhz.github.io/shn-ui/img/Koala.jpg" ref="cropper" centerBox :fixedNumber="[2,1]"/>
</div>
<shn-button @click="getCropData()" block ref="cropper" style="margin:10px 0" type="primary">获取截图后的图片</shn-button>
export default {
  methods:{
    getCropData() {
      this.$refs.cropper.getCropData(data => {
        console.log(data)
      })
    }
  }
}

2、API说明

2.1、属性

参数	说明	类型	可选值	默认值
img	裁剪图片的地址	String	url 地址 / base64 / blob	—
outputSize	裁剪生成图片的质量	Number	0.1 - 1	1
outputType	裁剪生成图片的格式	String	jpeg / png / webp	jpeg
info	裁剪框的大小信息	Boolean	true / false	true
canScale	图片是否允许滚轮缩放	Boolean	true / false	true
autoCrop	是否默认生成截图框	Boolean	true / false	false
autoCropWidth	默认生成截图框宽度	String	—	80%
autoCropHeight	默认生成截图框高度	String	—	80%
fixed	是否开启截图框宽高固定比例	Boolean	true / false	true
fixedNumber	截图框的宽高比例	Array	[宽度, 高度]	[1, 1]
full	是否输出原图比例的截图	Boolean	true / false	true
fixedBox	固定截图框大小 不允许改变	Boolean	true / false	true
canMove	上传图片是否可以移动	Boolean	true / false	true
canMoveBox	截图框能否拖动	Boolean	true / false	true
original	上传图片按照原始比例渲染	Boolean	true / false	false
centerBox	截图框是否被限制在图片里面	Boolean	true / false	false
high	是否按照设备的dpr 输出等比例图片	Boolean	true / false	true
infoTrue	true 为展示真实输出图片宽高 false 展示看到的截图框宽高	Boolean	true / false	false
maxImgSize	限制图片最大宽度和高度	Number	—	2000
enlarge	图片根据截图框输出比例倍数	String	—	1
mode	图片默认渲染方式	String	contain / cover / 100px / 100% / auto	contain

2.2、事件

参数	说明	类型	可选值	默认值
@imgMoving	图片移动事件	—	—	—
@cropMoving	截图框移动事件	—	—	—

2.3、方法

参数	说明	类型	可选值	默认值
startCrop	开始截图	—	—	—
stopCrop	停止截图	—	—	—
clearCrop	清除截图	—	—	—
changeScale	修改图片大小 正数为变大 负数变小	—	—	—
getImgAxis	获取图片基于容器的坐标点	—	—	—
getCropAxis	获取截图框基于容器的坐标点	—	—	—
goAutoCrop	自动生成截图框函数	—	—	—
rotateRight	向右边旋转90度	—	—	—
rotateLeft	向左边旋转90度	—	—	—
getCropData	获取截取后的图片内容

3、完整代码展示

<template>
  <div>
    <el-button class="primary" @click="dialogVisible = true">图片截取</el-button>
    <div class="home" style="width:100%;height:500px">
    <el-dialog
        title="截取文件"
        :visible.sync="dialogVisible"
        width="30%"
       >
		
        <div class="cropper" >
            <vueCropper
                ref="cropper"
                :img="option.img"
                :outputSize="option.outputSize"
                :outputType="option.outputType"
                :canScale='option.canScale'
                :autoCrop='option.autoCrop'
                :autoCropWidth='option.autoCropWidth'
                :autoCropHeight='option.autoCropHeight'
                :canMoveBox='option.canMoveBox'
                :canMove='option.canMove'
                :centerBox='option.centerBox'
                :info='option.info'
                :fixedBox='option.fixedBox'
                @realTime='realTime'
            ></vueCropper>
        </div>
       <el-upload class="upload-demo"
       :auto-upload="false"
       :on-change="getImgUrl"
       :show-file-list="false"
       list-type="picture"
     >
        <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <img :src='previewImg'  alt="" class='previewImg' ref="img" style="display:block">
        <el-button type='primary' @click='handleClick'>确定</el-button>
   </el-dialog>
    <img :src="resImg" alt="" v-if="resImg" class='previewImg'>
  </div>
  </div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
export default {
  data () {
    return {
      dialogVisible:false,
      option: {
        img: require('../assets/images/swiper1.png'), // 裁剪图片地址
        outputSize: 1, // 裁剪生成图片质量
        outputType: 'jepg', // 裁剪生成图片格式
        canScale: true, // 图片是否允许滚轮播放
        autoCrop: true, // 是否默认生成截图框 false
        info: true, // 是否展示截图框信息
        autoCropWidth: 300, // 生成截图框的宽度
        autoCropHeight: 200, // 生成截图框的高度
        canMoveBox: true, // 截图框是否可以拖动
        fixedBox: false, // 固定截图框的大小
        canMove: false, // 上传图片是否可拖动
        centerBox: true, // 截图框限制在图片里面
      },
      resImg: null, //截图后图片
      previewImg: null, // 预览后的图片
      lists:[]
    }
  },
  components: {
    VueCropper
  },

  methods: {
    //点击获取图片路径
    getImgUrl(file){
        console.log(file)
        
        this.option.img = file.url;
    },
    handleClick () {
        //获取截图后的数据
      this.$refs.cropper.getCropData(data => {
        this.resImg = data
        //关闭模态框
       this.dialogVisible = false;
      })
    },
   
    realTime (data) {
      const that = this
      this.$refs.cropper.getCropBlob(data => {
        // 这里data数据为Blob类型，blobToDataURI方法转换成base64
        this.blobToDataURI(data, function(res) {
          that.previewImg = res
        })
      })
    }, 
    blobToDataURI(blob, callback) {
       var reader = new FileReader();
       reader.readAsDataURL(blob);
       reader.onload = function (e) {
          callback(e.target.result);
       }
    },
   
  },

}
</script>
<style scoped>


.reviewImg{
    width: 200Px;
    height: 200Px;
    object-fit: cover;
    border-radius: 50%;
  }
    .cropper{
    width: 500px;
    height: 500px;
    border: 1px solid orange;
  }

</style>