| 官网：
https://github.com/xyxiao001/vue-cropper
一、安装：或者
二、使用：import VueCropper from 'vue-cropper' 设置component： export default { components: { VueCropper }}template中插入：（外面需要套一个div，用于设置插件显示的大小）
<vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType"></vueCropper> data(){ return{ option:{ img: 'imgUrl', // img的URL或者base64 size: 1, outputType: 'png', } } }
三、内置方法： | 名称 | 功能 | 默认值 | 可选值 | | img | 裁剪图片的地址 | 空 | url 地址 / base64 / blob | | outputSize | 裁剪生成图片的质量 | 1 | 0.1 - 1 | | outputType | 裁剪图片的地址 | jpg (jpg 需要传入jpeg) | jpeg / png / web | 内置方法：通过this.$refs.cropper 调用插件。 this.$refs.cropper.startCrop() 开始截图（如果没有设置截图框的话，通过这个启动截图框）
this.$refs.cropper.stopCrop() 停止截图
this.$refs.cropper.clearCrop() 清除截图
this.$refs.cropper.getCropData() 获取截图信息（得到截图的URL或者base64）
// 获取截图的base64 数据 this.$refs.cropper.getCropData((data) => { // do something console.log(data) }) // 获取截图的blob数据 this.$refs.cropper.getCropBlob((data) => { // do something console.log(data) })
四、使用：<template> <div> <el-dialog title="图片剪裁" :visible.sync="show" append-to-body width="950px" center> <div class="cropper-content"> <div class="cropper-box"> <div class="cropper"> <vue-cropper ref="cropper" :img="option.img" :outputSize="option.outputSize" :outputType="option.outputType" :info="option.info" :canScale="option.canScale" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixed="option.fixed" :fixedNumber="option.fixedNumber" :full="option.full" :fixedBox="option.fixedBox" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :centerBox="option.centerBox" :height="option.height" :infoTrue="option.infoTrue" :maxImgSize="option.maxImgSize" :enlarge="option.enlarge" :mode="option.mode" @realTime="realTime" @imgLoad="imgLoad"> </vue-cropper> </div> <!--底部操作工具按钮--> <div class="footer-btn"> <div class="scope-btn"> <label class="btn" for="uploads">选择图片</label> <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="selectImg($event)"> <el-button size="mini" type="danger" plain icon="el-icon-zoom-in" @click="changeScale(1)">放大</el-button> <el-button size="mini" type="danger" plain icon="el-icon-zoom-out" @click="changeScale(-1)">缩小</el-button> <el-button size="mini" type="danger" plain @click="rotateLeft">
下载地址:
详解Vue的监听属性
使用JavaScript |
