canvas 应用之页面添加水印

最新推荐文章于 2024-12-29 10:30:00 发布

华而有识

最新推荐文章于 2024-12-29 10:30:00 发布

阅读量241

点赞数

CC 4.0 BY-SA版权

文章标签：数学建模

本文链接：https://blog.csdn.net/FrontEndEngineer/article/details/131211392

这篇博客介绍了如何利用canvas技术在网页中实现动态添加水印的效果，通过将绘制的水印转换为base64编码，并设置为背景图片，从而达到页面水印展示的目的。

实现逻辑：

用canvas 绘制水印，将绘制好的canvas 转为base64码，作为背景

具体代码如下：

warterMarkMobile.ts

/**  水印添加方法  */
let setWatermark = (str1:any, str2:any,str3:any,str4:any,str5:any,str6:any) => {
  let id = '1.23452384164.123412415'

  if (document.getElementById(id) !== null) {
    document.body.removeChild((document as any).getElementById(id))
  }

  let can = document.createElement('canvas')
  // 设置canvas画布大小
  can.width = 120
  can.height = 120
  

  let cans:any = can.getContext('2d')
  cans.rotate(-30 * Math.PI / 180) // 水印旋转角度
  cans.font = '12px Vedana'
  cans.fillStyle = '#666666'
  cans.textAlign = 'center'
  cans.textBaseline = 'Middle'
  cans.fillText(str1, 0, can.height - 35) // 水印在画布的位置x，y轴
  cans.fillText(str2, 46, can.height - 35)
  cans.fillText(str3, 0, can.height - 15)
  cans.fillText(str4, 46, can.height - 15)
  cans.fillText(str5, 0, can.height +