vue-cropper是一个可以进行图片剪辑的插件，使用于vue
github地址：https://github.com/xyxiao001/vue-cropper

1、下载vue-cropper

npm install vue-cropper

2、引用（组件引入）

2.1、引入下载的vue-cropper

import { VueCropper } from 'vue-cropper'

2.2、component引入组件

components: {VueCropper},

2.3、页面中使用

<div class="cropper" :style='{width: `${imgObj.width}px`, height: `${imgObj.height}px`}'><vueCropperref="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>

2.4、data中定义的数据

option: {img: require('../assets/preview.jpg'), // 裁剪图片地址，这里可以本地图片或者链接，链接不用requireoutputSize: 1, // 裁剪生成图片质量outputType: 'jepg', // 裁剪生成图片格式canScale: true, // 图片是否允许滚轮播放autoCrop: true, // 是否默认生成截图框 falseinfo: false, // 是否展示截图框信息autoCropWidth: 200, // 生成截图框的宽度autoCropHeight: 200, // 生成截图框的高度canMoveBox: true, // 截图框是否可以拖动fixedBox: true, // 固定截图框的大小canMove: false, // 上传图片是否可拖动centerBox: true, // 截图框限制在图片里面},

2.5、这里cropper组件宽高默认父组件的宽高，父组件宽高这里是获取图片的宽高动态添加

watch: {'option.img': {handler: function (val) {const that = thisconst img = new Image()img.src = valimg.onload  = function () {that.imgObj.width = this.widththat.imgObj.height = this.height}},immediate: true}}

2.6、效果展示

3、实现截图框移动，下方自动预览截图框中的图片

3.1、添加预览图片元素

<img :src='previewImg'  alt="" class='previewImg'>

3.2、data定义预览图片数据

previewImg: null, // 预览后的图片

3.3、@realTime 实时预览事件

在组件定义@realTime事件接收预览的数据

realTime (data) {console.log(data)const that = thisthat.previewImg = data.url} 

3.3.1、下面的是打印的结果图片以及效果

3.3.2、但是当你移动截图框会发现下面预览的图片没有任何变化，看打印的data.url就会知道返回的url都是相同的，因为数据缓存，所以即使图片移动了也不会有任何变化

3.3.3、查询vue-cropper的内置方法

 1  获取截图的 base64 数据：getCropData

this.$refs.cropper.getCropData(data => {// do somethingconsole.log(data)  
})

2 获取截图的 blob 数据：getCropBlob

this.$refs.cropper.getCropBlob(data => {// do somethingconsole.log(data)  
})

3.3.4、解决方法： 先用3.3.3中方法2实现实时预览中截图框移动图片更新

realTime (data) {const that = thisthis.$refs.cropper.getCropBlob(data => {// 这里data数据为Blob类型，blobToDataURI方法转换成base64this.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);}}

3.4、点击按钮获取当前截图框中的图片并下载（使用3.3.3中方法1）

3.4.1 添加元素

<el-button type='primary' @click='handleClick'>按钮</el-button>
<img :src="resImg" alt="" v-if="resImg" class='previewImg'>

3.4.2 data定义数据

resImg: null, //截图后图片

3.4.3、methods方法

handleClick () {this.$refs.cropper.getCropData(data => {console.log(data)this.resImg = datathis.handleDownload(data)})},handleDownload (url) {var a = document.createElement("a"); // 生成一个a元素var event = new MouseEvent("click"); // 创建一个单击事件a.download = "photo"; // 设置图片名称, 这里可以自定义，也可以获取图片名称进行修改a.href = url; // 将生成的URL设置为a.href属性a.dispatchEvent(event); // 触发a的单击事件}

3.4.4、打印结果以及效果

4、完整代码

```javascript