vue视频加水印logo,vue有水印的视频怎么去水印
这篇文章主要为大家详细介绍了某视频剪辑软件实现页面添加水印功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现页面添加水印的具体代码,供大家参考,具体内容如下
js文件
建一个watermark.js文件
设setWatermark=(str1,str2,str3)={
让我们假设id= 1。23560 .38898898661
if (document.getElementById(id)!==null) {
文档。身体。移除子文档。getelementbyid(id))
}
let can=document。createelement(“画布”)
罐宽=270
高度=100
let cans=can.getContext(2d )
罐.旋转(-20 *数学。/180)
cans.font=17px Vedana
cans.fillStyle=#666666
cans.textAlign=center
cans.textBaseline=Middle
cans.fillText(str1,can.width/2,can.height)
cans.fillText(str2,can.width/2,can.height 20)
cans.fillText(str3,can.width/2,can.height 40)
让div=document。createelement( div )
div.id=id
div.style.pointerEvents=none
div.style.top=20px
div.style.left=0px
div.style.opacity=0.15
div.style.position=fixed
div。风格。宽度=文档。文档元素。客户端宽度像素
div。风格。高度=文档。文档元素。客户端高度像素
div。风格。background= URL(可以。toda taurl( image/png ))左上方重复
document.body.appendChild(div)
退货编号
}
//添加水印
export const setWaterMark=(str1,str2,str3)={
let id=setWatermark(str1,str2,str3)
如果(文档。getelementbyid(id)===null){
id=setWatermark(str1,str2,str3)
}
}
//移除水印
导出常量removeWatermark=()={
让我们假设id= 1。23560 .38898898661
if (document.getElementById(id)!==null) {
文档。身体。移除子文档。getelementbyid(id))
}
}
页面引入
超文本标记语言添加
:style=" { background image:` URL($ { org background })`} "
引入
从" @/libs/watermark "导入{ removeWatermark,setWaterMark }
数据添加
组织背景: ,
已安装()添加
setWaterMark(str1,str2,str 3);
效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。