Vue实现裁切图片功能
作者：nicepainkiller
这篇文章主要为大家详细介绍了Vue实现裁切图片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue实现裁切图片的具体代码，供大家参考，具体内容如下
项目需求做一个身份证的裁切功能
原生开发的话，这种功能挺容易实现的
Web的没有做过相关功能，百度了一下 vue-cropper 在 VUE是使用还是蛮方便的
1）、安装 vue-cropper
npm install vue-cropper
2）、编写 .VUE 文件 cropper.vue 应为项目本身使用 mui
<template>
<div>
<div class="mui-fullscreen">
<div class="top" style="height:1.63rem;background:white;" v-on:click="onBack()">
<img src="../assets/img/payMent/fanhui@2x.png" style="width:0.17rem;margin-left: 0.21rem; margin-top: 0.89rem">
<p style="position: absolute; margin-left: 2.9rem;top: 0.8rem; font-family:PingFang-SC-Medium; color: black; font-size: 0.36rem;">实名认证</p>
</div>
<div style="position: absolute; width: 100%;top:1.63rem;bottom:1.2rem ;background:#F2F2F2 ;">
<!-- <img id="image" :src="image" style="width: 100%; width: 100%;"> -->
<img src="../assets/img/lobby/youxuanzhuan.png" style="width: 0.5rem; position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2;"
v-on:click="rotateLeft()" />
<img src="../assets/img/lobby/zuoxuanzhuan.png" style="width: 0.5rem; position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2;"
v-on:click="rotateRight()" />
<div class="cropperContent">
<vue-cropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType" :info="true"
:full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original"
:autoCrop="option.autoCrop" :fixed="option.fixed" :fixedNumber="option.fixedNumber" :centerBox="option.centerBox"
:infoTrue="option.infoTrue" :fixedBox="option.fixedBox" @realTime="realTime"></vue-cropper>
</div>
<!-- <div style="height: 2rem;width: 2rem; background: greenyellow; position: absolute; top: 5rem;">
<img :src="preview" style="height: 2rem;width: 2rem;" />
</div> -->
</div>
<div class="buttom" style="background: #618FF5; height:1.2rem;width:100%; bottom: 0rem; position:absolute;#F2F2F2"
v-on:click="onSelect()">
<p style="position: absolute; margin-left: 3.4rem;top: 0.3rem; font-family:PingFang-SC-Medium; color: white; font-size: 0.36rem;">确定</p>
</div>
<!-- <img :src="preview" style="height: 1rem;" /> -->
</div>
</div>
</template>
<script>
import {
VueCropper
} from 'vue-cropper'
export default {
data() {
return {
target: 0,
cropperHelp: null,
preview: null,
//裁剪组件的基础配置option
option: {
img: '', // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 1, // 裁剪生成图片的质量
outputType: 'jpeg', // 裁剪生成图片的格式
canScale: false, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 800, // 默认生成截图框宽度
autoCropHeight: 500, // 默认生成截图框高度
fixedBox: false, // 固定截图框大小 不允许改变
fixed: true, // 是否开启截图框宽高固定比例
fixedNumber: [16, 10], // 截图框的宽高比例
full: false, // 是否输出原图比例的截图
canMoveBox: true, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
centerBox: true, // 截图框是否被限制在图片里面
infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
},
}
},
components: {
VueCropper
},
methods: {
//放大/缩小
changeScale(num) {
console.log('changeScale')
num = num || 1;
this.$refs.cropper.changeScale(num);
},
//坐旋转
rotateLeft() {
console.log('rotateLeft')
this.$refs.cropper.rotateLeft();
},
//右旋转
rotateRight() {
console.log('rotateRight')
this.$refs.cropper.rotateRight();
},
// 实时预览函数
realTime(data) {
//this.previews = data
},
imgLoad(msg) {
console.log(msg)
},
cropImage() {
},
onSelect() {
this.$refs.cropper.getCropBlob((data) => {
//console.log("data===>",data)
var img = window.URL.createObjectURL(data);
this.$emit("onCutingResoult", {
img: img,
target: this.target
})
})
},
onReset(param) {
this.target = param.target
this.option.img = param.url
this.preview = param.url
},
onBack() {
this.$emit("onCutingBack")
}
}
}
</script>
<style scoped>
.mui-fullscreen {
background: white;
}
.cropperContent {
width: 100%;
height: 100%;
}
/* .mui-fullscreen {
background: #F2F2F2;
top: 0rem;
bottom: 0rem;
} */
</style>基本上，放里面就能使用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。