canvas 画背景图、logo、字幕，watermark-dom 加水印

原创 已于 2025-08-06 18:00:10 修改 · 186 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

于 2025-03-21 17:45:55 首次发布
<template>
  <div id="water-mark-wrapper" class="water-mark-wrapper" :style="[{width:canvasWidth+'px',height:canvasHeight+'px'}]">
    <!-- 背景图、LOGO、字幕 -->
    <canvas id="live-player-canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
    <!-- 水印 -->
    <div id="watermark-box" class="watermark-box" :style="[{width:canvasWidth+'px',height:canvasHeight+'px'}]"></div>
  </div>
</template>
 
<script>
// 先执行 npm i watermark-dom --save
import watermark from 'watermark-dom';// 或者 var watermark = require("watermark-dom")

export default {
  data() {
    return {
      canvasWidth: 0,
      canvasHeight: 0,
      canvasImg: "",// 背景图路径
      canvasLogo: "",// LOGO路径
      canvasText: "",// 字幕
      canvasElement: null,
      watermarkText: "",// 水印文字，优先级：文字>图片
      watermarkImgUrl: "",// 水印图片
      haveWaterMark: false,// 水印是否已加
      canvasTextFlag: false
    }
  },
  beforeDestroy() {
    // 清空canvas
    if (this.canvasElement) {
      this.canvasElement.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
      this.canvasElement = null;
    }
    // 清空水印
    if (this.haveWaterMark) {
      try {// 避免出现 Cannot read properties of null (reading 'parentNode') 的报错
        watermark.remove()
      } catch (err) {
        console.log(err)
        // 设置水印内容为空字符串
        // watermark.load(
        //   { watermark_id: "wm_div_id", watermark_txt: " " }
        // )
        watermark.load(
          {
            watermark_id: "wm_div_id",// 水印总体的id
            watermark_prefix: "mask_div_id",// 小水印的id前缀
            watermark_txt: "",// 水印文字的内容
            watermark_color: 'transparent',// 水印字体颜色，透明
            watermark_alpha: 0.2,// 水印透明度，要求设置大于等于0.005
            watermark_fontsize: '16px',// 水印字体大小
            watermark_width: 250,// 水印宽度
            watermark_height: 80,// 水印长度
            watermark_parent_node: 'watermark-box'// 水印插件挂载的父元素elementId,不输入则默认挂在body上
          }
        )
      }
      this.haveWaterMark = false;
    }
  },
  mounted() {
    // 计算宽高
    if (document.querySelector(".xxx")) {
      let ele = document.querySelector(".xxx");
      let rect = ele.getBoundingClientRect();
      this.canvasWidth = rect.width;
      this.canvasHeight = rect.width / 16 * 9;
    }
    window.addEventListener('resize', () => {
      if (this.haveWaterMark) {
        // 避免出现 Cannot read properties of null (reading 'parentNode') 的报错
        try {
          watermark.remove()
        } catch (err) {
          console.log(err)
          // 设置水印内容为空字符串
          // watermark.load(
          //   { watermark_id: "wm_div_id", watermark_txt: " " }
          // )
          watermark.load(
            {
              watermark_id: "wm_div_id",// 水印总体的id
              watermark_prefix: "mask_div_id",// 小水印的id前缀
              watermark_txt: "",// 水印文字的内容
              watermark_color: 'transparent',// 水印字体颜色，透明
              watermark_alpha: 0.2,// 水印透明度，要求设置大于等于0.005
              watermark_fontsize: '16px',// 水印字体大小
              watermark_width: 250,// 水印宽度
              watermark_height: 80,// 水印长度
              watermark_parent_node: 'watermark-box'// 水印插件挂载的父元素elementId,不输入则默认挂在body上
            }
          )
        }
        this.haveWaterMark = false;
      }
      if (document.querySelector(".xxx")) {
        // 计算宽高
        let ele = document.querySelector(".xxx");
        let rect = ele.getBoundingClientRect();
        this.canvasWidth = rect.width;
        this.canvasHeight = rect.width / 16 * 9;
        this.initWaterMark();
        this.initCanvas();
      }
    })
  },
  methods: {
    // 加水印
    initWaterMark() {
      this.$nextTick(() => {
        if (document.getElementById("watermark-box") && this.canvasWidth > 0 && this.canvasHeight > 0 && !this.haveWaterMark) {
          this.haveWaterMark = true;
          let that = this;
          try {
            if (that.watermarkText) {
              // 展示文字水印
              watermark.load(
                {
                  watermark_id: "wm_div_id",// 水印总体的id
                  watermark_prefix: "mask_div_id",// 小水印的id前缀
                  watermark_txt: that.watermarkText,// 水印文字的内容
                  watermark_color: 'white',// 水印字体颜色
                  watermark_alpha: 0.2,// 水印透明度，要求设置大于等于0.005
                  watermark_fontsize: '16px',// 水印字体大小
                  watermark_width: 100,// 水印宽度
                  watermark_height: 20,// 水印高度
                  watermark_parent_node: 'watermark-box',// 水印插件挂载的父元素elementId,不输入则默认挂在body上
                  // watermark_x: 20,// 水印起始位置x轴坐标
                  // watermark_y: 20,// 水印起始位置Y轴坐标
                  // watermark_rows: 0,// 水印行数
                  // watermark_cols: 0,// 水印列数
                  // watermark_x_space: 100,// 水印x轴间隔
                  // watermark_y_space: 50,// 水印y轴间隔
                  // watermark_font: '微软雅黑',// 水印字体
                  // watermark_angle: 15,// 水印倾斜度数
                  // watermark_parent_width: 0,// 水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）
                  // watermark_parent_height: 0,// 水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）
                }
              )
            } else {
              // 展示图片水印
              watermark.load(
                {
                  watermark_id: "wm_div_id",// 水印总体的id
                  watermark_prefix: "mask_div_id",// 小水印的id前缀
                  watermark_txt: "",// 水印文字的内容
                  watermark_color: 'transparent',// 水印字体颜色，透明
                  watermark_alpha: 0.2,// 水印透明度，要求设置大于等于0.005
                  watermark_fontsize: '16px',// 水印字体大小
                  watermark_width: 150,// 水印宽度
                  watermark_height: 150,// 水印长度
                  watermark_parent_node: 'watermark-box'// 水印插件挂载的父元素elementId,不输入则默认挂在body上
                }
              )
              // 延迟，确保页面渲染完成
              setTimeout(() => {
                // 小水印内容替换成图片
                let elements = document.querySelector('#wm_div_id').shadowRoot.querySelectorAll('div[id^="mask_div_id"]');
                elements.forEach(function (element) {
                  element.innerHTML = '<img src="' + that.watermarkImgUrl + '" style="max-width:100%;max-height:100%;"/>';
                });
              }, 3000);
            }
            console.log("水印设置成功")
          } catch (err) {
            console.log(err)
          }
        }
      })
    },
    // 加背景图、LOGO、字幕
    initCanvas() {
      // 清空canvas
      if (this.canvasElement) {
        this.canvasElement.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
        this.canvasElement = null;
      }
      if (!this.canvasElement && this.canvasWidth > 0 && this.canvasHeight > 0) {
        this.$nextTick(async () => {
          let canvas = document.getElementById('live-player-canvas');
          let ctx = canvas.getContext('2d');
          this.canvasElement = ctx;
          let that = this;
          // 图片从最底层到最高层依次绘制
          if (this.canvasImg && this.canvasImg != "") {
            // 背景图
            await this.drawCanvas(1, 0, 0, that.canvasWidth, that.canvasHeight).then((res) => {
              if (res == 0) {
                console.log("底图设置成功");
              } else {
                console.log("底图设置失败");
              }
            });
          }
          if (this.canvasLogo && this.canvasLogo != "") {
            // logo
            let x = that.canvasHeight * 0.03;
            let y = that.canvasHeight * 0.03;
            await this.drawCanvas(2, x, y, that.canvasHeight * 0.11, that.canvasHeight * 0.11).then((res) => {
              if (res == 0) {
                console.log("LOGO设置成功");
              } else {
                console.log("LOGO设置失败");
              }
            });
          }

          setTimeout(async () => {
            if (this.canvasText && this.canvasText != "") {
              // 字幕
              let textWidth = ctx.measureText(that.canvasText).width;// 计算字幕长度
              if (!this.canvasTextFlag) {
                this.canvasTextFlag = true;
                await this.drawCanvas(3, (that.canvasWidth * 0.5 - textWidth / 2) > 0 ? (that.canvasWidth * 0.5 - textWidth / 2) : 0, that.canvasHeight * 0.93, Math.floor(that.canvasWidth - that.canvasHeight * 0.02)).then((res) => {
                  if (res == 0) {
                    console.log("字幕设置成功");
                  } else {
                    console.log("字幕设置失败");
                  }
                });
              }
            }
          }, 2000)
        })
      }
    },
    drawCanvas(type, x, y, w, h) {
      // type：1-底图 2-LOGO 3-字幕
      return new Promise((resolve, reject) => {
        let res = resolve;
        let rej = reject;
        let that = this;
        // 1-底图 2-LOGO
        if (type == 1 || type == 2) {
          let img = new Image();
          img.crossOrigin = 'anonymous';
          img.src = type == 1 ? that.canvasImg : that.canvasLogo;
          img.onload = () => {
            that.canvasElement.drawImage(img, x, y, type == 1 ? w : (img.width / img.height * h), h);
            if (type == 1) {
              that.canvasElement.clearRect(0, that.canvasHeight * 0.17, that.canvasWidth, that.canvasHeight * 0.66);
            }
            res(0);
          };
          img.onerror = () => {
            rej("加载失败");
          };
          if (img.complete) {
            res(0);
          }
        } else if (that.canvasTextFlag) {
          // 3-字幕
          that.canvasTextFlag = false;
          that.canvasElement.font = that.canvasHeight * 0.04 + "px Arial";
          that.canvasElement.fillStyle = "red";
          that.canvasElement.fillText(that.canvasText, x, y, w);
          res(0);
        }
      });
    },
  },
};
</script>
 
<style scoped>
.water-mark-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
}
#live-player-canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1001;
}
.watermark-box {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1002;
}
</style>

zhengzzzzz
关注
【前端可视化】Canvas 下载图片添加背景色因为缩放导致比例不同问题
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
06-29 478
比例不同是因为缩放导致的，缩放导致绘图中心发生改变，我们需要把填充的背景色的范围扩大(根据缩放比例来)，同时背景色要绘制在现有画布的后面，防止重叠遮挡。 感觉一个小下载，需要注意的事项还是挺多的，记录下，希望能帮助到其他人，里面的一些 API 请参考 MDN 文档。 下面的参考代码，自己根据自己实际项目需要来修改就行。 // 下载图片 const handleDownloadImg = () =...
利用Canvas画布实现动态背景
水瓶KaKei的博客
12-18 4134
引言 在现代网页设计中，动态背景效果是吸引用户眼球的重要元素之一。本文将介绍如何利用Canvas技术来创建一个简单动态背景效果。通过代码示例，你将学习如何编写和利用Canvas绘制动态场景，从而实现一个独特而吸引人的背景效果。
简单水印（watermark-dom）和算法水印（频域方式图片合并）实现
weixin_33720956的博客
04-17 2907
一、简单水印（watermark-dom） 阿里巴巴内网的不可见水印用的是什么算法？ 据说月饼事件截图的那位员工也被开除了？ 下面的只是简单的加一个很浅的水印，实现起来很容易。 1、看看水印的效果 随便找一个网站，比如就找掘金的个人首页， （1）F12检查模式， （2）在console里粘贴下面的代码， (function(watermark){window.watermarkdivs=[];va...
（小程序）canvas 绘制图片做背景（新手向）
weixin_49602763的博客
05-19 2541
小程序绘制图片为背景，首先我们需要把图片先下载下来（这里最好是封装一个函数，因为背景不可能只有一张的）下面是代码，一般直接复制就能使用，有可能需要微调。
绘制页面背景水印
老哥二娃
05-27 489
function Watermark (data) { this.id = data.id || 'my-canvas'; // canvas id this.wrapper = document.querySelector(data.wrapper) || document.body; // 绘制容器 this.attribute = data.attribute; // canva...
canvas操作图片& 设置背景
weixin_45615650的博客
04-25 6108
** canvas操作图片: ** 在画布上插入图片： 在canvas中获取图片的路径： var img = new Image(); img.src = “路径” ctx.drawImage(img,x,y,img.width,img.heigth)方法 ** 在canvas设置背景： ** ctx.createPatter(图片，平铺方式)方法 这个方法有返回值，如果我们想要对我们的画布设置背景 例： var patter = ctx.createPatter(图片，平铺方式); ctx.fillSty
如何在Canvas中添加背景图片、图片元素和文字元素
Jiaberrr的博客
11-27 3392
Canvas是HTML5中一个强大的元素，它允许我们在网页上进行图形绘制。在本文中，我们将学习如何在Canvas中添加背景图片、图片元素以及文字元素。
canvas使用图片作为背景图片
qq_45290368的博客
12-06 2850
使用图片作为canvas的背景图
canvas-使用图片背景
weixin_54057363的博客
03-09 2262
canvas-使用createPattern()方法,填充图片背景
为canvas画布动态设置背景图片
一杯清茶的博客
04-20 5938
为canvas画布动态设置背景图片 关键是将canvas和img标签放到同一个盒子里，盒子设置相对位置，并且canvas和img需要设置相同的相对位置 <div class="list3"> <canvas id="canvas" width="1276" height="800"></canvas> <img :src=url id="scream" width="1276" height="800"> </div> <s
canvas 实现圆形加背景图
jinse29的博客
11-05 2258
好久不用canvas，昨天有小妹问怎么给一个圆形设置背景图，发现之前会的都遗忘了，顺带重新学习了下canvas，记录下顺手的小知识点。 先上效果图 图片原图： 直接上代码，注释解释的挺详细的~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas画圆并追加背景图</title> <style> #canv..
canvas画布组件
m0_73566589的博客
11-10 504
代码编写： #在画布上添加各种几何图形 from tkinter import * root=Tk() #设置主窗口区的背景顔色以区别画布区的顔色 root.config(bg='#8DB6cD') root.title("基于tk的canvas几何图形") root.geometry('500x400') #画布设置为白色 canvas=Canvas(root,width=400,height=400,bg='white') #设置基准坐标 x0,y0,x1,y1=10,10,80,80 #绘制扇形
设置canvas图作为背景图？亲测有效
wuyundong123的博客
09-10 9268
最近项目中需要做一些数据可视化，大屏可视化类似的展示， 之前没有任何这方面的经验，于是先后尝试了d3,echars等主流的框架，在引用官网提供的examples的时候遇到了一大堆问题，在此记录下，方便日后查询学习； Echarts官网：https://echarts.apache.org/en/index.html Echarts菜鸟教程：https://www.runoob.com/echarts/echarts-setup.html 问题1：为 ECharts 准备一个具备高宽的 DOM 容...
VUE实现页面添加水印
zgs_888的博客
09-13 3607
在网站开发中，为了防止用户截图或录屏暴露敏感信息，追踪用户来源，需要在网页中添加水印。
31 canvas使用图片及设置背景
热门推荐
丨Anna丨的博客
10-29 1万+
31 canvas使用图片及设置背景 1使用图片 在canvas中插入图片(需要image对象) 1.canvas操作图片时，必须要等图片加载完才能操作 2.drawImage(image, x, y, width, height) 其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。 这个方法多了2个参数：width 和 height，这两个参数用来控制 当像canvas画入时应该缩放的大小 在canvas中设置背景(需要.
watermark-dom 添加水印使用方法
mtgaogao的博客
06-23 3464
1.下载依赖包 npm install watermark-dom 下载成功后pakeage.json中会添加如下依赖： "watermark-dom": "^2.3.0" 2.引用 import watermark from 'watermark-dom' 3.配置 调用 3.1手动加载 watermark.load({ watermark_txt: "水印水印" }) 3.2初始化水印 watermark.init({ watermark_txt: "水...
canvas 添加本地图片作为背景图并在背景图上画区域
最新发布
weixin_42297590的博客
12-02 669
canvas添加本地图片作为背景图并在背景图上画区域
canvas-使用图片&设置背景(图片背景,线性渐变,径向渐变)
nicecode
07-27 5833
在canvas中插入图片(需要image对象) ​ 1.canvas操作图片时，必须要等图片加载完才能操作 ​ 2.drawImage(image, x, y, width, height) ​ 其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。 ​ 这个方法多了2个参数：width 和 height，这两个参数用来控制图片的大小 <!DOCTYPE html> <html> <head> <m
vue项目中使用canvas,设置canvas背景图,叠加图片,实现鼠标拖动 , 截图保存等功能
面对疾风吧
05-28 7064
因为这个是我的项目代码,所以代码复制过去也用不了,只是给各位做个参考。 canvas背景图,鼠标拖动图片,获取图片在canvas的位置,截图保存等功能 <template> <div> <div class="clearfix"> <div class="leftdiv"> <canvas id="mycanvas" width="600" height="820" @mousedown="touchmove" @mousemove=
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值