网站 制作水印 第1篇
原因：图片还未渲染完，就返回了 canvas。
解决方案：等图片渲染完了，再开始画到 canvas 中
本文主要讲了两个话题：页面水印 & 图片水印。页面水印很简单，基本上就是利用 canvas 渲染水印，再利用伪类将 canvas 的水印渲染在特定的区域。图片相对而言会复杂一些，在渲染水印之前，得先把图片渲染上去，针对大图，性能可能会慢一点。所以，如果对水印要求不是很严格并且图片是存储在 oss 的，那利用 oss 来加水印也不失为一种好选择。但如果从安全性来考虑，那肯定是服务端加水印会更合适一点。
Node 社群
我组建了一个氛围特别好的 社群，里面有很多 小伙伴，如果你对学习感兴趣的话（后续有计划也可以），我们可以一起进行相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
网站 制作水印 第2篇
使用CSS来添加重复水印的方法是将水印图片作为背景图片，并使用 background-repeat 属性来实现重复效果，以下是一个示例：
在这个示例中，我们创建了一个包含水印的容器元素 .watermarked-element，并将水印图片设置为背景图片。通过设置 background-repeat: repeat;，水印图片会在容器内重复显示。通过调整 opacity 属性，可以控制水印的透明度。最后，使用 pointer-events: none; 可以防止水印干扰用户的交互操作。
这种方法适用于需要在整个页面或特定元素上添加水印的情况，且不需要通过Canvas来绘制水印。
网站 制作水印 第3篇
解决方案：ui 告诉我们，png 图片导出默认是透明的，但是 jpg 默认会将透明的地方填充白色的背景，所以，我们查阅对图片进行格式转换的参数说明及实例_对象存储-阿里云帮助中心文档得出，只需要加上 x-oss-process=image/format,jpg, 对之前的 genOSSImageWaterMark 进行改造，对非 jpg 的图片都转成 jpg 的图片
效果如下：
注意点②