vue视频加水印logo,vue有水印的视频怎么去水印

  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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: