神奇的canvas——巧用 canvas 为图片添加水印

原创

676015863 2023-06-01 00:50:56 ©著作权

文章标签 canvas 图片水印垂直居中水平垂直居中 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者676015863的原创作品，请联系作者获取转载授权，否则将追究法律责任

很久之前写过一篇关于 canvas 的文章，是通过 canvas 来实现一个绚丽的动画效果，不管看过没看过的小伙伴都可以直接猛戳下面的链接直达这篇文章哦！

因为之前很多篇都是偏向理论的，所以这次决定上点实际的内容——通过 canvas 为图片添加自定义水印，并且在文章末尾也会附上源码。下面进入正文~~~

添加水印的原理

原理很简单，主要分为下面几步

将需要添加水印的图片绘制到 canvas 上
将水印图片绘制到 canvas 上
将 canvas 的内容导出为图片

使用到的 canvas 的 api

// 获取当前 canvas 的上下文环境，用来操作在 canvas 上绘制内容
// 
const ctx = canvas.getContext('2d')

// 向 canvas 上绘制图片
// image 为一个图片对象
// x 为绘制图片的横向起始位置，y 为绘制图片的纵向起始位置
// width 为要绘制在 canvas 上宽度， height 为高度
// 该方法最多可接受 9 个参数，从而实现剪裁的效果，但是与本篇内容无关，感兴趣的小伙伴可以搜索该方法
ctx.drawImage(image, x, y, width, height)

// 将 canvas 上的内容导出为 base64 格式的字符串，导出后可以直接赋值给 Image 对象的 src 属性
// 第一个参数为导出的图片格式，可接受第二个参数（小于或等于 1 的数，表示导出图片的压缩比率）
canvas.toDataURL("image/png")

其他要点

如果是通过链接获取的图片和水印，那么需要在绘制水印图片之前，先将两张素材图片加载完成，由于图片的加载时异步的，所以务必在确保图片已经成功加载后才可以开始添加水印

demo 最终的实现效果

可以看到每张图片的右下角都有一张小的水印图片

demo 中的添加水印的类可以单独使用，自定义的配置有如下几项：

水印图片路径
水印添加位置：目前支持 9 种位置，分别是左上角 | 右上角 | 左下角 | 右下角 | 顶部水平居中 | 底部水平居中 | 左边垂直居中 | 右边垂直居中 | 水平垂直居中（默认位置）
水印位置与图片边缘的距离：默认 10px，在水平垂直居中时无效
水印与图片的宽度比：用来保证不管在多大的图片上都能达到相同的显示效果