canvas绘制水印

前言

canvas 是个很神奇的东西，能完成很多事情。
初步听到水印的需求，能想到的思路就是通过canvas绘制水印图片，转为base64设置到容器的背景图片上。

实现

话不多说，上代码

/**
 * @param {*} dom
 * @param {String} txt
 */
export const Watermark = function (dom, txt) {
  if (!dom) return false
  let length = txt.length * 20 // 根据内容生成画布大小，20代表比例
  let canvas = document.createElement('canvas')
  canvas.width = canvas.height = length
  canvas.style.display = 'none'
  document.body.appendChild(canvas)
  let context = canvas.getContext('2d')
  context.font = '12px "PingFangSC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif'
  context.fillStyle = 'rgba(0,0,0,0.1)'
  context.rotate(-15 * Math.PI / 180) // 画布里面文字的旋转角度
  context.fillText(str, length / 2, length) // 文字的位置
  dom.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`
}

画布的宽高、文字的旋转角度、文字的位置可以根据项目具体需求进行调整。