官方文档：https://www.npmjs.com/package/vue-cropper
安装：npm install vue-cropper
<!-- https://www.npmjs.com/package/vue-cropper -->
<template><div class="home-page"><div class="cut-container"><vueCropper ref="cropper" :img="option.img" :output-type="option.outputType" :info="option.info":can-scale="option.canScale" :can-move="option.canMove" :fixed="option.fixed" :fixed-number="option.fixedNumber":fixed-box="option.fixedBox" :can-move-box="option.canMoveBox" :original="option.original" :mode="option.mode":max-img-size="option.maxImgSize" :enlarge="option.enlarge" :limit-min-size="option.limitMinSize"@imgMoving="handleImgMoving" @cropMoving="handleCropMoving" @imgLoad="handleImgLoad" @realTime="handleRealTime"></vueCropper></div><div class="operation-btns"><el-button @click="handleStart">开始框选</el-button><el-button @click="handleClear">清除</el-button><el-button @click="handleComplete">完成</el-button><el-button @click="download">下载</el-button><el-button @click="rotateLeft">rotateLeft</el-button><el-button @click="getImgAxis">获取图片基于容器的坐标点</el-button><el-button @click="getCropAxis">获取截图框基于容器的坐标点</el-button></div><!-- 点击完成生成的截图 --><img :src="cutUrl" alt=""><!-- 框选过程中实时预览截图 --><div class="show-preview" :style="previewStyle1"><div :style="previews.div"><img :src="option.img" :style="previews.img"></div></div><p>1.5倍大小</p><div :style="previewStyle2"><div :style="previews.div"><img :src="previews.url" :style="previews.img"></div></div><p>固定为 100 宽度</p><div :style="previewStyle3"><div :style="previews.div"><img :src="previews.url" :style="previews.img"></div></div></div>
</template><script>
import { VueCropper } from 'vue-cropper'
export default {components: {VueCropper},data() {return {option: {// 裁剪图片的地址: url 地址, base64, blobimg: require('@/assets/images/1.jpg'),// 裁剪生成图片的格式: jpeg, png, webp; 默认jpegoutputType: 'png',// 是否显示裁剪框的大小信息；默认trueinfo: true,// 图片是否允许滚轮缩放；默认truecanScale: false,// 图片是否允许移动 ；默认truecanMove: true,// 是否开启截图框宽高固定比例；默认falsefixed: false,// 截图框的宽高比例, 开启fixed生效fixedNumber: [1, 1],// 截图框大小不允许改变，默认允许改变fixedBox: false,// 截图框能否拖动; 默认truecanMoveBox: true,// 上传图片按照原始大小渲染，默认falseoriginal: false,// 图片默认渲染方式：contain , cover, 100px, 100% auto；默认containmode: 'cover',// 限制图片最大宽度和高度;默认2000maxImgSize: 2000,// 图片根据截图框输出比例倍数enlarge: 1,// 裁剪框限制最小区域: Number, Array, StringlimitMinSize: 10,},cutUrl: '',previews: {},previewStyle1: {},previewStyle2: {},previewStyle3: {},}},methods: {handleStart() {// 开始截图this.$refs.cropper.startCrop()},handleStop() {// 停止截图this.$refs.cropper.stopCrop()},handleClear() {// 清除截图this.$refs.cropper.clearCrop()},handleComplete(type) {const canvas = document.createElement('canvas')canvas.width = 500canvas.height = 333const ctx = canvas.getContext('2d')const img = new Image()img.onload = () => {ctx.drawImage(img, 0, 0, 500, 333)const { x1, y1, x2, y2 } = this.$refs.cropper.getCropAxis()ctx.strokeStyle = 'rgb(245, 0, 0)'ctx.lineWidth = 4ctx.strokeRect(x1, y1, x2 - x1, y2 - y1)this.cutUrl = canvas.toDataURL()}img.src = this.option.img// if (type === 'blob') {// // 获取截图的 blob 数据// this.$refs.cropper.getCropBlob((data) => {// const url = window.URL.createObjectURL(data)// this.cutUrl = url// this.handleClear()// this.handleStop()// })// } else {// // 获取截图的 base64 数据// this.$refs.cropper.getCropData((data) => {// this.cutUrl = data// this.handleClear()// this.handleStop()// })// }},download(type) {const aLink = document.createElement('a')aLink.download = 'demo'// 输出if (type === 'blob') {this.$refs.cropper.getCropBlob((data) => {this.downImg = window.URL.createObjectURL(data)aLink.href = window.URL.createObjectURL(data)aLink.click()})} else {this.$refs.cropper.getCropData((data) => {this.downImg = dataaLink.href = dataaLink.click()})}},rotateLeft() {// 向左边旋转90度this.$refs.cropper.rotateLeft()},rotateRight() {// 向右边旋转90度this.$refs.cropper.rotateRight()},// 图片移动回调函数handleImgMoving(val) {console.log(val, 'handleImgMoving')},// 截图框移动回调函数handleCropMoving(val) {console.log(val, 'handleCropMoving')},// 图片加载的回调, 返回结果 success, errorhandleImgLoad(val) {console.log(val, 'handleImgLoad')},// 实时预览事件handleRealTime(data) {console.log(data, 'handleRealTime')var previews = datathis.previewStyle1 = {width: previews.w + 'px',height: previews.h + 'px',overflow: 'hidden',margin: '0',}this.previewStyle2 = {width: previews.w + 'px',height: previews.h + 'px',overflow: 'hidden',margin: '0',zoom: 1.5}// 固定为 100 宽度this.previewStyle3 = {width: previews.w + 'px',height: previews.h + 'px',overflow: 'hidden',margin: '0',zoom: 100 / previews.w}this.previews = data},// 获取图片基于容器的坐标点getImgAxis() {console.log(this.$refs.cropper.getImgAxis())},// 获取截图框基于容器的坐标点getCropAxis() {console.log(this.$refs.cropper.getCropAxis())}}
}
</script><style lang="scss" scoped>
.home-page {padding: 10px;.cut-container {// width: 300px;// height: 150px;width: 500px;height: 333px;}.operation-btns {width: 100%;height: 40px;display: flex;align-items: center;margin: 10px 0;}
}
</style>
