vue有水印的视频怎么去水印,vue水印制作
这篇文章主要为大家详细介绍了某视频剪辑软件轻松实现水印效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前言：
某视频剪辑软件项目中使用水印效果，可指定容器
效果图：
1、不指定容器
2、指定容器
实现方法：
1、新建一个配置文件水印。js，可放util，也可放别的地方
设水印={}
let setWatermark=(text，sourceBody)={
设id=数学。random()* 10000 -数学。random()* 10000 /数学。random()* 10000
if (document.getElementById(id)！==null) {
文档。身体。移除子文档。getelementbyid(id))
}
let can=document。createelement(“画布”)
罐宽=150
高度=120
let cans=can.getContext(2d )
罐.旋转(-20 *数学。/180)
cans.font=15px Vedana
cans.fillStyle=rgba(0，0，0，5)
cans.textAlign=left
cans.textBaseline=Middle
cans.fillText(text，can.width/20，can.height)
设water _ div=document。createelement( div )
water_div.id=id
水_分区。风格。指针事件=无
水_分区。风格。background= URL(可以。toda taurl( image/png ))左上方重复
if(sourceBody){
water_div.style.width=100%
water_div.style.height=100%
源体。appendchild(water _ div)
}否则{
water_div.style.top=3px
water_div.style.left=0px
水_分区。风格。位置=固定
water_div.style.zIndex=100000
水_分区。风格。宽度=文档。文档元素。客户端宽度像素
水_分区。风格。高度=文档。文档元素。客户端高度像素
文档。身体。appendchild(water _ div)
}
退货编号
}
/**
* 该方法只允许调用一次
* @param:
* @text==水印内容
* @sourceBody==水印添加在哪里，不传就是身体
* */
watermark.set=(text，sourceBody)={
let id=setWatermark(text，sourceBody)
setInterval(()={
如果(文档。getelementbyid(id)===null){
id=setWatermark(text，sourceBody)
}
}, 2000)
window.onresize=()={
设置水印(文本，源正文)
}
}
导出默认水印
2、在主页。射流研究…中全局配置
//水印
从导入水印 0/utils/watermark . js
vue。原型。$ watermark=水印
3、页面中使用-全屏水印
这个. watermark.set(浩星2731)
4、页面中使用-指定容器
el-button @click=添加水印点我添加水印/el-button
div ref= content style= width:500 px；高度：500像素边框：1px纯色# ccc
addWatermark(){
这个. watermark.set(浩星2731 ,这个. refs.content)
}
5、如果觉得字体之间的距离太大了，改这个属性就行了
罐宽=150
高度=120
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。