目前博客上传图片使用的是后端上传图片，再二次处理添加水印。
为什么这么做呢？因为我是个后端，当年对前端不是太熟悉。但是，其实，前端也是可以使用canvas在图片上添加水印之后再将图片上传到服务器上边的。
嗯，前端是一个好神奇的语言。
先介绍一下项目背景：项目使用VUE3.2 + Typescript + Vite2.9来搭建的。
前端组件库使用的是ant-design-vue3.2.15
给图片添加水印是在上传图片组件的beforeUpload方法中进行操作的：
/**
* @name: 上传前校验
* @author: camellia
* @email: guanchao_gc@qq.com
* @date: 2022-12-11
*/
export const beforeUpload = (file:any) => {
// 添加水印
return new Promise(resolve => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
// 创建一个img对象
const img: HTMLImageElement = document.createElement('img');
img.src = reader.result as string;
img.onload = () => {
// 创建一个canvas对象
const canvas = document.createElement('canvas');
// 将图片的长宽赋值给canvas
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
// getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
const ctx = canvas.getContext('2d');
let w = ctx?.canvas.width ?? 0;
let h = ctx?.canvas.height ?? 0;
// 字体大小与画布宽度比例为 1 : 38
let fontSize = Math.round(w / 38);
if(fontSize < 35)
{
fontSize = 35;
}
// 将图片画到canvas对象上
ctx?.drawImage(img, 0, 0);
if(ctx != null)
{
// 添加文字水印
ctx.fillStyle = '#CCC';
ctx.textBaseline = 'middle';
ctx.font = fontSize + 'px Arial';
ctx.fillText('天启网络', w - (4 * fontSize) - fontSize, h - fontSize);
}
canvas.toBlob(resolve);
};
};
});
}
我这里对不同尺寸的图片添加水印的字体大小做了一个简单的比例判断。
在实际应用中针对不同尺寸的图片可能还需要做更详细的判断，这里只是简单做了一个示例。
处理后的图片如下图所示：
右下角的那个小水印就是最开始没有针对图片宽度对字体大小做处理儿添加的水印，不太协调。
以上大概就是前端使用canvas添加图片水印的简单示例。
有好的建议，请在下方输入您的评论。
