vue对已生成的视频去水印的方法,vue 水印
页面水印大家或许都不陌生，本文主要介绍了某视频剪辑软件之全局水印的实现示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
目录
1.创建水印射流研究…文件
2.引入操作
2.1 在App.vue中引用或其他页面
2.2 在路由器配置文件中引用【需求】系统内页面显示水印，登录页面没有水印（退出登录时，登录页面不会显示水印)
1.创建水印Js文件
/*
* @作者：刘小二
* @日期：2021-07-15 14:43:27
* @ LastEditTime:2021-07-15 15:00:27
* @LastEditors:请设置最后的编辑者
* @描述：添加水印
* @文件路径：/huashijc _ meeting sys/src/common/water mark。射流研究…
*/
使用严格
设水印={}
设setWatermark=(str)={
让我们假设id= 1。23560 .38889898661
if (document.getElementById(id)！==null) {
文档。身体。移除子文档。getelementbyid(id))
}
let can=document。createelement(“画布”)
罐宽=250
高度=120
let cans=can.getContext(2d )
罐.旋转(-15度*数学。/150)
cans.font=20px Vedana
cans.fillStyle=rgba(200，200，200，0.20)
cans.textAlign=left
cans.textBaseline=Middle
cans.fillText(str，can.width/8，can.height/2)
让div=document。createelement( div )
div.id=id
div.style.pointerEvents=none
div.style.top=35px
div.style.left=0px
div.style.position=fixed
div.style.zIndex=100000
div。风格。宽度=文档。文档元素。客户端宽度像素
div。风格。高度=文档。文档元素。客户端高度像素
div。风格。background= URL(可以。toda taurl( image/png ))左上方重复
document.body.appendChild(div)
退货编号
}
//该方法只允许调用一次
watermark.set=(str)={
let id=setWatermark(str)
setInterval(()={
如果(文档。getelementbyid(id)===null){
id=setWatermark(str)
}
}, 500)
window.onresize=()={
设置水印(字符串)
}
}
const outWatermark=(id)={
if (document.getElementById(id)！==null) {
const div=文档。getelementbyid(id)
div.style.display=none
}
}
watermark.out=()={
const str= 1。23450 .38383838661
水印外(字符串)
}
导出默认水印
2.引入操作
2.1 在App.vue中引用或其他页面
//1.在App.vue文件中，导入该文件
从" @/常用/水印"导入水印
计算值：{
用户名(){
const name=this .$store.state.user.name
return (name name.length 0)？名称： 未获取到用户名
}
},
已安装(){
Watermark.set(这个。用户名)
}
//2.在其他页面引用
从" @/常用/水印"导入水印
已创建(){
水印。set("admin ")
}
2.2 在router配置文件中引用
const outWatermark=(id)={
if (document.getElementById(id)！==null) {
const div=文档。getelementbyid(id)
div.style.display=none
}
}
router.afterEach((to)={
if(to.path==/){
Watermark.out() //清除水印
}否则{
Watermark.set(未获取到用户名) //设置水印标题
}
});
到此这篇关于某视频剪辑软件之全局水印的实现示例的文章就介绍到这了，更多相关某视频剪辑软件全局水印内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。