vue图片拖动,vue页面截图
最近项目上要做一个车牌识别的功能，就需要做拖动截图功能了，因为前段是vue，所以下面这篇文章主要给大家介绍了关于某视频剪辑软件拖动截图功能的简单实现方法，需要的朋友可以参考下
拖动鼠标进行页面截图（也可指定区域拖动截图)
一、安装html2canvas、vue-cropper
npm i html2canvas - save //用于将指定区域转为图片
npm i vue-cropper -S //将图片进行裁剪
二、在main.js注册vue-cropper组件
从“vue-cropper”导入VueCropper
vue。使用(vue铜)
三、页面中引入html2canvas
从" html2canvas "导入html2canvas
导出默认值{
}
四、代码分解
1、将指定区域转为图片
这个. nextTick(()={
html2canvas(document.body，{}).然后(canvas={
让数据URL=canvas。toda taurl( image/png )；
this.uploadImg=dataURL
this.loading=true
});
})
这里是将身体整个页面转为图片，得到base64格式数据，其他区域直接获取班级或者编号
2、将生成的图片进行拖动截图
模板
div class=pop_alert v-if=show
vueCropper
@mouseenter.native=enter
@mouseleave.native=leave
"庄稼"
: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
:fixed number=选项。固定数量
:centerBox=option.centerBox
:infoTrue=option.infoTrue
:fixedBox=option.fixedBox
style=" background-image:无
/vueCropper
div class=btn_box
div @click=保存确认截图/div
div @click=close 取消/div
/div
/div
/模板
脚本
导出默认值{
data(){
选项：{
info: true，//裁剪框的大小信息
输出大小：0.8,//裁剪生成图片的质量
outputType: jpeg ，//裁剪生成图片的格式
canScale: false，//图片是否允许滚轮缩放
autoCrop: false，//是否默认生成截图框
fixedBox: false，//固定截图框大小不允许改变
fixed: false，//是否开启截图框宽高固定比例
固定号码：[7,5],//截图框的宽高比例
full: true，//是否输出原图比例的截图
canMove: false，//时候可以移动原图
canMoveBox: true，//截图框能否拖动
原文：假，//上传图片按照原始比例渲染
中心框：false，//截图框是否被限制在图片里面
infoTrue: true //true为展示真实输出图片宽高错误的展示看到的截图框宽高
},
上传：,
显示：假
},
方法：{
enter() {
if (this.uploadImg==) {
返回；
}
这个参考文献。克罗珀。开始裁剪()；//开始裁剪
},
leave() {
这个参考文献。克罗珀。停止裁剪()；//停止裁剪
},
save() { //确认截图
这个参考文献。克罗珀。获取作物数据((数据)={//获取截图的base64格式数据
console.log(数据)
this.show=false
})
//这个参考文献。克罗珀。getcropblob(data={//获取截图的一滴格式数据
//这个。cutimg=数据；
//});
},
close(){ //取消
this.show=false
}
}
}
/脚本
五、全部代码
模板
差异
div @click=剪裁裁剪/div
！-继续写页面的其他内容弹出警报可封装成组件使用-
div class=pop_alert v-if=show
vueCropper
@mouseenter.native=enter
@mouseleave.native=leave
"庄稼"
: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
:fixed number=选项。固定数量
:centerBox=option.centerBox
:infoTrue=option.infoTrue
:fixedBox=option.fixedBox
style=" background-image:无
/vueCropper
div class=btn_box
div @click=保存确认截图/div
div @click=close 取消/div
/div
/div
/div
/模板
脚本
从" html2canvas "导入html2canvas
导出默认值{
data(){
返回{
选项：{
info: true，//裁剪框的大小信息
输出大小：0.8,//裁剪生成图片的质量
outputType: jpeg ，//裁剪生成图片的格式
canScale: false，//图片是否允许滚轮缩放
autoCrop: false，//是否默认生成截图框
fixedBox: false，//固定截图框大小不允许改变
fixed: false，//是否开启截图框宽高固定比例
固定号码：[7,5],//截图框的宽高比例
full: true，//是否输出原图比例的截图
canMove: false，//时候可以移动原图
canMoveBox: true，//截图框能否拖动
原文：假，//上传图片按照原始比例渲染
中心框：false，//截图框是否被限制在图片里面
infoTrue: true //true为展示真实输出图片宽高错误的展示看到的截图框宽高
},
上传：,
显示：假
}
},
方法：{
剪裁(){ //裁剪
这个. nextTick(()={
html2canvas(document.body，{}).然后(canvas={
让数据URL=canvas。toda taurl( image/png )；
this.uploadImg=dataURL
this.show=true
});
})
},
enter() {
if (this.uploadImg==) {
返回；
}
这个参考文献。克罗珀。开始裁剪()；//开始裁剪
},
leave() {
这个参考文献。克罗珀。停止裁剪()；//停止裁剪
},
save() { //确认截图
这个参考文献。克罗珀。获取作物数据((数据)={//获取截图的base64格式数据
console.log(数据)
this.show=false
})
//这个参考文献。克罗珀。getcropblob(data={//获取截图的一滴格式数据
//这个。cutimg=数据；
//});
},
close(){ //取消
this.show=false
}
}
}
/脚本
风格。pop_alert{
宽度：100%;
身高：100%;
位置：绝对；
top:0；
左：0;
边框：1px虚线红色；
背景色：# 000000;
}。btn_box{
位置：绝对；
top:0；
颜色：红色；
右：0;
字体大小：30px
显示器：flex
对齐-项目：居中；
z指数：6666;
}
/风格
效果图
总结
到此这篇关于某视频剪辑软件拖动截图功能实现的文章就介绍到这了，更多相关某视频剪辑软件拖动截图功能内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。