不规则截图,vue前端开发截图功能
这篇文章主要介绍了某视频剪辑软件实现无规则截图的方法，帮助大家更好的理解和学习使用某视频剪辑软件框架，感兴趣的朋友可以了解下
目录
通过挽救(保存的简写)实现图片截取
钢性铸铁部分效果图展示源码地址
大家所见到的大多数都是有规则截图，可以应付大部分的应用场景，但是对于图片处理，想要将规则交给用户，普通的截图已经满足不了用户了，那我们能不能前端实现图片的任意规则截取，接下来让我一起探讨一下吧！
通过 svg 实现 图片截取
使用挽救(保存的简写)中剪辑路径图像标签通过编号映射，动态位置多边形的坐标，实现图片的截取
差异
div class= content @ mousemove= mousemove @ mouseup=(e)={ mouseup(e)；}
！-画布展示-
挽救(保存的简写)
ref=blackSvg
黑色Svg
xmlns= http://www。w3。 org/2000/SVG
宽度=300
高度=300
面数
clipPath id=clippath
多边形：点=点/多边形
/clipPath
/defs
图像
xmlns:link= http://www。w3。 org/1999/xlink
href= https://ss 2。BD静态。com/70 cfvnsh _ Q1 ynxgkpowk 1 HF 6 hy/it/u=3228549874，2173006364fm=26gp=0。jpg rel=外部无跟随
宽度=300
高度=300
preserveAspectRatio=none
style=clip-path: url(#clippath)
/图片
/svg
！-拖拽点-
ul class=拦截
里
v-for=item in 4
:ref=`li${item} `
:key=item
@mousedown=(e)={mousedown(e，item)；}
/李
/ul
！-底图展示-
图片
黑色的
src= https://ss 2。BD静态。 com/70 cfvnsh _ Q1 ynxgkpowk 1 HF 6 hy/it/u=3228549874，2173006364fm=26gp=0.jpg
alt=
/
！-遮罩层-
div class=blackDiv/div
/div
/div
css部分
style lang=sass 。blackDiv
宽度：100%
高度：100%
位置：绝对
顶部：0
z指数：2
背景：rgba(0，0，0，1)。内容
宽度：300像素
高度：300像素
文本对齐：左对齐
位置：相对。黑色挽救（saving的简写）
位置：绝对
顶部：0
z指数：3。黑色
位置：绝对
顶部：0
左侧：0
宽度：300像素
高度：300像素。拦截
列表样式：无
位置：绝对
顶部：0
边距：0
填充：0
z指数：3
里
位置：绝对
宽度：10px
高度：10px
背景：蓝色
边框半径：50%
光标：指针
：悬停
变换：缩放(1.2)
过渡-持续时间：2
李：第n胎(1)
顶部：10px
左：10px
李：第n个孩子(2)
顶部：10px
左：100像素
李：第n个孩子(3)
顶部：100像素
左：100像素
李：第n胎(4)
顶部：100像素
左：10px
/风格
脚本
导出默认值{
名称：画布，
data() {
返回{
点数： 0 0,300 0,300 300,0 300 ,//图片展示初始化
状态：假，
指数：0,
disX: 0，
disY: 0，
坐标：{ //初始化拖拽点
1: [0, 0],
2: [300, 0],
3: [300, 300],
4: [0, 300],
},
};
},
已安装(){
这个. nextTick(()={
对于（输入此坐标){
const left=this。坐标[key][0]；
const top=this。坐标[key][1]；
这个参考文献[`李$ { key } `]。风格。left=` $ { left } px
这个参考文献[`李$ { key } `]。风格。top=` $ { top } px
if (key==2 key==3) {
这个参考文献[`李$ { key } `]。风格。left=` $ { left-10 } px `；
}
if (key==3 key==4) {
这个参考文献[`李$ { key } `]。风格。top=` $ { top-10 } px `；
}
}
document.onmouseup=()={
this.status=false
};
});
},
方法：{
//鼠标按下
mousedown(e，index) {
this.status=true
this.index=index
this.disX=e.clientX - this .$refs[`li${index}`].获取
这个. disY=e.clientY -这个.$refs[`li${index}`].抵消
},
//鼠标抬起
鼠标抬起(e) {
this.status=false
},
//鼠标移动
鼠标移动(e) {
if (this.status) {
让left=e . clientx-this。disx
让top=e . clienty-这个。disy
这个参考文献[`李$ {此。index } `]。风格。left=` $ { left } px
这个参考文献[`李$ {此。index } `]。风格。top=` $ { top } px
这个。坐标【这个。index]=[left，top]；
const points arr=[]；
对于（让项目在此坐标中){
pointsArr.push(
数组。从(这个。坐标[项目]，(e)={
返回E5；
})
);
}
这个。点数=点数排列。join()；
}
},
},
};
效果图展示
源码地址
开源代码库地址github.com/lgxin/captu…
以上就是某视频剪辑软件实现无规则截图的详细内容，更多关于某视频剪辑软件无规则截图的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。