前端添加水印

/**
 * 图片添加水印
 * */

// 读取图像文件渲染到IMG标签
function URLToBase64(url) {
  return new Promise((resolve, reject) => {
    let image = new Image()
    image.setAttribute("crossOrigin", "Anonymous")
    image.src = url;
    image.onload = () => {
      let imageCanvas = imgToCanvas(image)
      let obj = {
        imageCanvas,
        image
      }
      return resolve(obj)
    }
  })
}

// 将IMG标签内容绘制到CANVAS画布
function imgToCanvas(img) {
  let canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height
  let ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0)
  return canvas
}

// canvas绘制水印内容
function textCanvas(text, image) {
  return new Promise((resolve, reject) => {
    try {
      let canvas = document.createElement('canvas')
      canvas.width = parseInt(image.width / 3)
      canvas.height = parseInt(image.width / 4)
      let ctx = canvas.getContext('2d')
      ctx.fillStyle = 'rgba(255,255,255,0)';
      ctx.fillRect(0, 0, canvas.width, canvas.height)
      // 水印旋转角度
      ctx.rotate(20 * Math.PI / 180) // 水印旋转角度
      // 设置填充字号和字体，样式
      ctx.font = '24px "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif'
      // 水印颜色
      ctx.fillStyle = 'rgba(102, 102, 102, 0.4)' // rgba(102, 102, 102, 0.4)
      // 水印水平对齐方式
      // ctx.textAlign = 'center'
      // 水印垂直对齐方式
      // ctx.textBaseline = 'Middle'
      text.forEach((item, index) => {
        item && ctx.fillText(item, canvas.width / 8, canvas.height / 4 + index * 16) // 水印在画布的位置x，y轴
      })
      resolve(canvas)
    } catch (error) {
      reject(error)
    }
  })
}

// CANVAS画布上绘制repeat水印并转换为BLOB对象
function watermark(canvas, img) {
  let ctx = canvas.getContext('2d')
  // 创建CanvasPattern对象
  let pattern = ctx.createPattern(img, "repeat")
  // 将新创建的CanvasPattern对象赋值给fillStyle属性
  ctx.fillStyle = pattern
  // 绘制图案
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  return canvas.toDataURL('image/png')
}

// 图片添加水印完整接口
async function imgWatermark(text, imgUrl) {
  let { imageCanvas, image } = await URLToBase64(imgUrl)
  let textImage = await textCanvas(text, image)
  let newBase = await watermark(imageCanvas, textImage)
  return newBase
}

export default imgWatermark

imgWatermark(text, url).then(newImage => {
    console.log(newImage)
})