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

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

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

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