Vue拖动截图功能的简单实现方法
更新时间：2021年07月08日 15:51:33 作者：前端社区
最近项目上要做一个车牌识别的功能,就需要做拖动截图功能了,因为前段是vue,所以下面这篇文章主要给大家介绍了关于Vue拖动截图功能的简单实现方法,需要的朋友可以参考下
拖动鼠标进行页面截图(也可指定区域拖动截图)
一、安装html2canvas、vue-cropper
npm i html2canvas --save //用于将指定区域转为图片 npm i vue-cropper -S //将图片进行裁剪
二、在main.js注册vue-cropper组件
import VueCropper from 'vue-cropper' Vue.use(VueCropper)
三、页面中引入html2canvas
import html2canvas from "html2canvas"
export default{
}
四、代码分解
1、将指定区域转为图片
this.$nextTick(()=>{
html2canvas(document.body,{}).then(canvas => {
let dataURL = canvas.toDataURL("image/png");
this.uploadImg = dataURL
this.loading = true
});
})
这里是将body整个页面转为图片，得到base64格式数据，其他区域直接获取class或者id
2、将生成的图片进行拖动截图
<template>
<div class="pop_alert" v-if="show">
<vueCropper
@mouseenter.native="enter"
@mouseleave.native="leave"
ref="cropper"
:img="uploadImg"
: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"
style="background-image:none"
></vueCropper>
<div class="btn_box">
<div @click="save">确认截图</div>
<div @click="close">取消</div>
</div>
</div>
</template>
<script>
export default{
data(){
option: {
info: true, // 裁剪框的大小信息
outputSize: 0.8, // 裁剪生成图片的质量
outputType: "jpeg", // 裁剪生成图片的格式
canScale: false, // 图片是否允许滚轮缩放
autoCrop: false, // 是否默认生成截图框
fixedBox: false, // 固定截图框大小 不允许改变
fixed: false, // 是否开启截图框宽高固定比例
fixedNumber: [7, 5], // 截图框的宽高比例
full: true, // 是否输出原图比例的截图
canMove: false, //时候可以移动原图
canMoveBox: true, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
centerBox: false, // 截图框是否被限制在图片里面
infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
},
uploadImg:"",
show: false
},
methods:{
enter() {
if (this.uploadImg == "") {
return;
}
this.$refs.cropper.startCrop(); //开始裁剪
},
leave() {
this.$refs.cropper.stopCrop();//停止裁剪
},
save() { //确认截图
this.$refs.cropper.getCropData((data) => { //获取截图的base64格式数据
console.log(data)
this.show = false
})
// this.$refs.cropper.getCropBlob(data => { //获取截图的Blob格式数据
// this.cutImg = data;
// });
},
close(){ //取消
this.show = false
}
}
}
</script>
五、全部代码
<template>
<div>
<div @click="tailoring">裁剪</div>
<!--继续写页面的其他内容 pop_alert可封装成组件使用-->
<div class="pop_alert" v-if="show">
<vueCropper
@mouseenter.native="enter"
@mouseleave.native="leave"
ref="cropper"
:img="uploadImg"
: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"
style="background-image:none"
></vueCropper>
<div class="btn_box">
<div @click="save">确认截图</div>
<div @click="close">取消</div>
</div>
</div>
</div>
</template>
<script>
import html2canvas from "html2canvas"
export default{
data(){
return{
option: {
info: true, // 裁剪框的大小信息
outputSize: 0.8, // 裁剪生成图片的质量
outputType: "jpeg", // 裁剪生成图片的格式
canScale: false, // 图片是否允许滚轮缩放
autoCrop: false, // 是否默认生成截图框
fixedBox: false, // 固定截图框大小 不允许改变
fixed: false, // 是否开启截图框宽高固定比例
fixedNumber: [7, 5], // 截图框的宽高比例
full: true, // 是否输出原图比例的截图
canMove: false, //时候可以移动原图
canMoveBox: true, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
centerBox: false, // 截图框是否被限制在图片里面
infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
},
uploadImg:"",
show: false
}
},
methods:{
tailoring(){ //裁剪
this.$nextTick(()=>{
html2canvas(document.body,{}).then(canvas => {
let dataURL = canvas.toDataURL("image/png");
this.uploadImg = dataURL
this.show = true
});
})
},
enter() {
if (this.uploadImg == "") {
return;
}
this.$refs.cropper.startCrop(); //开始裁剪
},
leave() {
this.$refs.cropper.stopCrop();//停止裁剪
},
save() { //确认截图
this.$refs.cropper.getCropData((data) => { //获取截图的base64格式数据
console.log(data)
this.show = false
})
// this.$refs.cropper.getCropBlob(data => { //获取截图的Blob格式数据
// this.cutImg = data;
// });
},
close(){ //取消
this.show = false
}
}
}
</script>
<style>
.pop_alert{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 1px dashed red;
background-color: #000000;
}
.btn_box{
position: absolute;
top: 0;
color: red;
right: 0;
font-size: 30px;
display: flex;
align-items: center;
z-index: 6666;
}
</style>
效果图
总结
到此这篇关于Vue拖动截图功能实现的文章就介绍到这了,更多相关Vue拖动截图功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了 面试问题Vue双向数据绑定原理，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要介绍了Vue代理请求数据出现404的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了vue store之状态管理模式的详细介绍，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要为大家详细介绍了vue实现本地存储添加删除修改功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
详解Vue ElementUI手动上传excel文件到服务器
这篇文章主要介绍了详解Vue ElementUI手动上传excel文件到服务器，对ElementUI感兴趣的同学，可以参考下2021-05-05
本篇文章主要介绍了详解Vue整合axios的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了Vue中使用this.$set()实现新增数据,更新视图方式。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue3 自定义图片放大器效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-07-07
require是一个node方法，用于引入模块，JSON或本地文件，这篇文章主要介绍了vue中动态引入图片为什么要是require,需要的朋友可以参考下2022-10-10
本篇文章主要介绍了Vue 项目部署到服务器的问题解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
最新评论