前端实现给图片添加水印

一、利用Canvas

::: tip

实现步骤:

• 上传图片，转换为base64格式的数据，利用Image加载图片
• 利用canvas写入图片，然后绘制水印
• 最后通过canvas输出添加水印后的base64数据

:::

1. 本地读取图像文件渲染到img标签

::: tip

​ 通过intpt[type=file]读取文件，将会得到已被Blob对象,借助FileReader.readAsDataURL读取Blob内容并得到Base64编码

​ 读取操作是个异步操作，读取完成后会触发load事件，为了方便之后的使用，使用一个Promise封装这个操作

:::

// blob转图像
const blobToImg = (blob) => {
    return new Promise((resolve,reject) => {
        const reader = new FileReader()
        reader.addEventListener('load',() => {
            const img = new Image()
            img.src = reader.result
            img.addEventListener('load',() => resolve(img))
        })
        reader.readAsDataURL(blob)
    })
}

2. 将img的内容绘制到canvas中

::: tip

​ drawImage这个方法可以传入多个参数，以定义绘制的图像的范围，这里传入的0, 0定义从图像左上角开始绘制，后面可以继续传入两个参数来定义图像的绘制终点

:::

const imgToCanvas = (img) => {
    const canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    const context = canvas.getContext('2d')
    context.drawImage(img,0,0)
    return canvas
}

3. 在canvas画布上添加水印并转换为Blob对象

const canvasWatermark = (canvas,text) => {
    return new Promise((resolve,reject) => {
        const ctx = canvas.getContext('2d')
        // 设置填充字号和字体，样式
          ctx.font = "24px 宋体"
          ctx.fillStyle = "#FFC82C"
          // 设置右对齐
          ctx.textAlign = 'right'
          // 在指定位置绘制文字，这里指定距离右下角20坐标的地方
          ctx.fillText(text, canvas.width - 20, canvas.height - 20)
          canvas.toBlob(blob => resolve(blob))
    })
}

4. 使用方法

  <!-- 只接受图片类型文件 图片上传-->
  <input type="file" id="upload" accept="image/*">
  <!-- 添加水印后展示区域 -->
  <div id="container"></div>

	const inputEl = document.getElementById('upload')
    const container = document.getElementById('container')
    inputEl.addEventListener('change', async (e) => {
      const waterImg = await imgWaterMark(e.target.files[0], 'Ocean')
      container.appendChild(waterImg)
    })
    // 读取本地文件渲染到img
    const blobToImg = (blob) => {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.addEventListener('load', () => {
          let img = new Image()
          img.src = reader.result
          img.addEventListener('load', () => resolve(img))
        })
        reader.readAsDataURL(blob)
      })
    }
    // 将img内容绘制到canvas画布
    const imgToCanvas = (img) => {
      let canvas = document.createElement('canvas')
      canvas.width = img.width
      canvas.height = img.height
      let context = canvas.getContext('2d')
      context.drawImage(img, 0, 0)
      return canvas
    }
    // canvas画布上绘制水印并转换为blob对象
    const waterMark = (canvas, text) => {
      return new Promise((resolve, reject) => {
        let ctx = canvas.getContext('2d')
        // 设置填充的字号 字体 样式
        ctx.font = "30px Josefin Slab"
        ctx.fillStyle = "#fff"
        // 右对齐
        ctx.textAlign = 'right'
        // 指定位置绘制文字
        ctx.fillText(text, canvas.width - 20, canvas.height - 20)
        canvas.toBlob(blob => resolve(blob))
      })
    }
    // 绘制水印并返回添加水印后的图片
    const imgWaterMark = async (file, text) => {
      let img = await blobToImg(file)
      let canvas = imgToCanvas(img)
      let blob = await waterMark(canvas, text)
      // 此处将Blob读取到img标签，并在dom内渲染出来；如果是上传文件，可以将blob添加到FormData中
      let newImage = await blobToImg(blob)
      return newImage
    }

二、利用第三方库

::: tip

​ 例如可以使用watermark.js

​ 地址和使用方法详情见：watermark.js

:::