网站 制作水印 第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 的图片
效果如下:
注意点②