vue切图是什么意思,vue实现截图功能
这篇文章主要为大家详细介绍了某视频剪辑软件实现裁切图片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现裁切图片的具体代码，供大家参考，具体内容如下
项目需求做一个身份证的裁切功能
原生开发的话，这种功能挺容易实现的
网的没有做过相关功能，百度了一下武埃-克罗珀在VUE是使用还是蛮方便的
1）、安装 vue-cropper
安装武埃-克罗珀
2）、编写 .VUE 文件 cropper.vue 应为项目本身使用 mui
模板
差异
div class= mui-全屏
div class= top style= height:1.63雷姆；背景：白色；v-on:click=onBack()
img src=./资产/img/付款/范慧@ 2x。png style= width:0.17雷姆；左边距：0.21毫米；上边距：0.89雷姆
p style=position:绝对；左边距：2.9雷姆；顶部：0.8雷姆；字体系列：方平-SC-培养基；颜色：黑色；字体大小：0.36雷姆；实名认证/p
/div
div style= position:absolute；宽度：100%;顶：1.63雷姆；底部：1.2雷姆；背景：# F2F2F2
！-img id= image :src= image style= width:100%；宽度：100%;-
img src=./assets/img/lobby/you玄传。png style= width:0.5雷姆；位置：绝对；顶部：0.5雷姆；左：0.5雷姆；z索引：2;
v-on:click=rotateLeft() /
img src=./资产/img/大堂/左传。png style= width:0.5雷姆；位置：绝对；顶部：0.5雷姆；右：0.5雷姆；z索引：2;
v-on:click= rotator right()/
div class=cropperContent
vue-cropper ref= cropper :img=选项。 img :输出大小=选项。 size :输出类型=选项。“输出类型”:info=“true”
:full=选项。满:可以移动=选项。 can move :canMoveBox=选项。 canMoveBox :original=选项。原始
:自动裁剪=选项。“自动裁剪”:fixed=“选项。 fixed :fixed number=选项。固定数:中心框=选项。中心框
:info true=选项。 info true :fixed box=选项。固定框 @ real time= real time /vue-cropper
/div
！-div style= height:2 rem；宽度：2雷姆；背景：黄绿色；位置：绝对；顶：5雷姆；
img:src= preview style= height:2 rem；宽度：2毫米；/
/div -
/div
div class= buttom style= background:# 618 ff 5；身高：1.2雷姆；宽度：100%;底部：0雷姆位置：绝对；#F2F2F2
v-on:click=onSelect()
p style=position:绝对；左边距：3.4毫米；top:0.3雷姆；字体系列：方平-SC-培养基；颜色：白色；字体大小：0.36雷姆；确定/p
/div
！-img:src= preview style= height:1 rem；/-
/div
/div
/模板
脚本
导入{
VueCropper
}来自“vue-cropper”
导出默认值{
data() {
返回{
目标：0,
cropperHelp: null，
预览：空，
//裁剪组件的基础配置选择权
选项：{
img: ，//裁剪图片的地址
info: true，//裁剪框的大小信息
outputSize: 1，//裁剪生成图片的质量
outputType: jpeg ，//裁剪生成图片的格式
canScale: false，//图片是否允许滚轮缩放
autoCrop: true，//是否默认生成截图框
自动裁剪宽度：800,//默认生成截图框宽度
自养：500,//默认生成截图框高度
fixedBox: false，//固定截图框大小不允许改变
fixed: true，//是否开启截图框宽高固定比例
固定号码：[16,10],//截图框的宽高比例
full: false，//是否输出原图比例的截图
canMoveBox: true，//截图框能否拖动
原文：假，//上传图片按照原始比例渲染
centerBox: true，//截图框是否被限制在图片里面
infoTrue: true //true为展示真实输出图片宽高错误的展示看到的截图框宽高
},
}
},
组件：{
VueCropper
},
方法：{
//放大/缩小
变更比例（数量){
console.log(changeScale )
num=num 1；
这个参考文献。克罗珀。更改比例(数字)；
},
//坐旋转
rotateLeft() {
console.log(rotateLeft )
这个参考文献。克罗珀。rotate left()；
},
//右旋转
向右旋转(){
console.log(rotateRight )
这个参考文献。克罗珀。rotator right()；
},
//实时预览函数
实时（数据){
//this.previews=data
},
imgLoad(消息){
console.log(消息)
},
cropImage() {
},
onSelect() {
这个参考文献。克罗珀。getcropblob((data)={
//console.log(data===，data)
var img=window .URL.createObjectURL(数据);
这个. emit(onCutingResoult ，{
img: img，
目标：这个。目标
})
})
},
onReset(param) {
this.target=param.target
this.option.img=param.url
this.preview=param.url
},
onBack() {
这个emit(onCutingBack )
}
}
}
/脚本
样式范围。梅-全屏{
背景：白色；
}。裁剪内容{
宽度：100%;
身高：100%;
}
/* .梅-全屏{
背景：# F2F2F2
top:0雷姆；
底部：0雷姆
} */
/风格
基本上，放里面就能使用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。