前端实现给图片添加水印

708 字

4 分钟

前端实现给图片添加水印

2023-04-27

前端

JS

一、利用Canvas#

TIP
实现步骤:

上传图片，转换为base64格式的数据，利用Image加载图片

利用canvas写入图片，然后绘制水印

最后通过canvas输出添加水印后的base64数据

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

TIP
通过intpt[type=file]读取文件，将会得到已被Blob对象,借助FileReader.readAsDataURL读取Blob内容并得到Base64编码
读取操作是个异步操作，读取完成后会触发load事件，为了方便之后的使用，使用一个Promise封装这个操作

1
// blob转图像
2
const blobToImg = (blob) => {
3
    return new Promise((resolve,reject) => {
4
        const reader = new FileReader()
5
        reader.addEventListener('load',() => {
6
            const img = new Image()
7
            img.src = reader.result
8
            img.addEventListener('load',() => resolve(img))
9
        })
10
        reader.readAsDataURL(blob)
11
    })
12
}

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

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

1
const imgToCanvas = (img) => {
2
    const canvas = document.createElement('canvas')
3
    canvas.width = img.width
4
    canvas.height = img.height
5
    const context = canvas.getContext('2d')
6
    context.drawImage(img,0,0)
7
    return canvas
8
}

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

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

4. 使用方法#

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

1
  const inputEl = document.getElementById('upload')
2
    const container = document.getElementById('container')
3
    inputEl.addEventListener('change', async (e) => {
4
      const waterImg = await imgWaterMark(e.target.files[0], 'Ocean')
5
      container.appendChild(waterImg)
6
    })
7
    // 读取本地文件渲染到img
8
    const blobToImg = (blob) => {
9
      return new Promise((resolve, reject) => {
10
        const reader = new FileReader()
11
        reader.addEventListener('load', () => {
12
          let img = new Image()
13
          img.src = reader.result
14
          img.addEventListener('load', () => resolve(img))
15
        })
16
        reader.readAsDataURL(blob)
17
      })
18
    }
19
    // 将img内容绘制到canvas画布
20
    const imgToCanvas = (img) => {
21
      let canvas = document.createElement('canvas')
22
      canvas.width = img.width
23
      canvas.height = img.height
24
      let context = canvas.getContext('2d')
25
      context.drawImage(img, 0, 0)
26
      return canvas
27
    }
28
    // canvas画布上绘制水印并转换为blob对象
29
    const waterMark = (canvas, text) => {
30
      return new Promise((resolve, reject) => {
31
        let ctx = canvas.getContext('2d')
32
        // 设置填充的字号 字体 样式
33
        ctx.font = "30px Josefin Slab"
34
        ctx.fillStyle = "#fff"
35
        // 右对齐
36
        ctx.textAlign = 'right'
37
        // 指定位置绘制文字
38
        ctx.fillText(text, canvas.width - 20, canvas.height - 20)
39
        canvas.toBlob(blob => resolve(blob))
40
      })
41
    }
42
    // 绘制水印并返回添加水印后的图片
43
    const imgWaterMark = async (file, text) => {
44
      let img = await blobToImg(file)
45
      let canvas = imgToCanvas(img)
46
      let blob = await waterMark(canvas, text)
47
      // 此处将Blob读取到img标签，并在dom内渲染出来；如果是上传文件，可以将blob添加到FormData中
48
      let newImage = await blobToImg(blob)
49
      return newImage
50
    }