直播app系统源码，给视频背景添加上水印

//配置示例<br>{<br>    container = document.body, <br>    width = '200px',   //水印宽度<br>    height = '148px',  //水印宽度<br>    textAlign = 'content', //水印方向<br>    textBaseline = 'middle', <br>    font = '16px Microsoft Yahei', //水印字体格式<br>    content = '水印', //水印内容<br>    rotate = '45', //字体倾斜角度<br>    zIndex = 10000,<br>}<br>//实现代码<br>const canvasInfo = function({<br>   container = document.body,<br>   width = '200px',<br>   height = '148px',<br>   textAlign = 'content',<br>   textBaseline = 'middle',<br>   font = '16px Microsoft Yahei',<br>   content = '水印',<br>   rotate = '45',<br>   zIndex = 10000,<br>} = {}) {<br>   const canvas = document.createElement('canvas'); //创建canvas<br>   canvas.setAttribute('width', width); //添加canvas属性<br>   canvas.setAttribute('height', height);<br>   const ctx = canvas.getContext('2d');<br>   ctx.textAlign = textAlign;<br>   ctx.textBaseline = textBaseline;<br>   ctx.font = font;<br>   ctx.rotate((Math.PI / 180) * rotate); //旋转角度<br>   ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);<br>   const base64Url = canvas.toDataURL()<br>   const watermarkDiv = document.createElement('div');<br>   const styleStr =<br>` position:fixed;<br>  top:0;<br>  left:0;<br>  bottom:0;<br>  right:0;<br>  width:100%;<br>  height:100%;<br>  z-index:${zIndex};<br>  background-image:url('${base64Url}');<br>  opacity: 0.1; <br> `;<br>   watermarkDiv.setAttribute('style', styleStr);//添加div属性<br>   container.insertBefore(watermarkDiv, container.firstChild); //向列表中插入<br>}<br>   canvasInfo()

以上就是直播app系统源码，给视频背景添加上水印，更多内容欢迎关注之后的文章