Canvas 实现图片加水印

需求场景

前几天时间组内同学接到个需要在图片上打水印效果的需求。

解决方案

前端可以用 canvas 的 drawImage 相关 api 实现 因为我们项目使用的是 React + antd 做的项目，所以我这里也是基于这套框架实现

1.首先选择图片使用 antd 的 Upload 组件，在 beforeUpload 阶段将图片对象转为 Base64

const getBase64 = (img) => {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => {
      resolve(reader.result);
    });
    reader.readAsDataURL(img);
  });
};

const beforeUpload = (file) => {
  getBase64(file).then((res) => {
     setImageUrl(res);
   });

   // 因为是 Demo 所以直接返回 false
   return false;
};

2.根据图片创建 canvas 对象，并调用 drawImage 将图片绘制到 canvas 上

const createCanvas = (image) => {
    canvasRef.current = document.getElementById('js_water_mark');
    const context = canvasRef.current.getContext('2d');

    canvasRef.current.width = Math.min(image.width, 672);
    canvasRef.current.height = Math.min(image.height, 672);

    context.drawImage(
      image,
      0,
      0,
      image.width,
      image.height,
    );

    appendWaterMark(context);
  };

3.添加水印文字

const appendWaterMark = (context) => {
    context.fillStyle = '#f60';
    context.textBaseline = 'middle';
    context.font = '24px 楷体';
    context.fillText('奈文摩尔·影魔', 24, 24);
};

4.导出图片

 const exportImage = () => {
    const waterMarkUrl = canvasRef.current.toDataURL('image/jpeg');
    return waterMarkUrl;
 }

效果展示

总结

前端实现图片水印效果，首先要熟悉 canvas 的画图片以及增加文字的 api，然后再根据具体需求做具体适配就可以了。