微信小程序页面添加水印动态变换页面高度

本文链接：https://blog.youkuaiyun.com/vancece/article/details/113545298

本文介绍了一种不同于常规方法的微信小程序添加水印方案，通过Canvas绘制并转换为Base64，创建绝对定位的水印元素，动态适应页面高度变化，同时避免影响其他元素，提供良好的用户体验。文中还提及了UPNG第三方库的使用及代码修改，以实现水印与父元素的贴合显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查了很久的资料，发现网上的小程序添加水印的方法都是大同小异：创建一个新元素，用画布填充，然后fixed固定在页面上，但是这样，有一个很大的问题，就是水印始终是固定在页面上的，水印一直浮在页面上不动，就好像爬了一只苍蝇在上面一样，用户的体验很不好。

所以，我另辟蹊径，找了另外一种方法。这种方法支持动态高度变化，水印也不是fixed在页面上的，支持覆盖特定的元素，而不对其它元素造成影响

这是这个方法的基本思路

使用Canvas绘制图片，将该图片转换成Base64
创建一个位置为absoulate的水印元素，父元素即要覆盖水印的元素，位置为relative，这样，水印元素就可以覆盖在父元素上方了，但是这样有一个很大的问题，就是：水印元素的告诉必须要与父元素的高度一致，所以这里只能通过js来实现高度的刷新

在这里插入图片描述

另外有一点要提的是，在将Canvas转换成base64时，使用到了第三方库：UPNG，需要对代码做一些修改，暴露接口，不然无法使用。

index.wxml

<!--index.wxml-->
<view wx:for="[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]" style="margin: 4px 0px;">内容--😁--O(∩_∩)O哈哈~</view>

<view style='padding: 10px;' class="my-element" style="position: relative;">
  <view wx:for="[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]" style="margin: 4px 0px;">机密内容--😁--O(∩_∩)O哈哈~</view>

  <!-- 这里是用于初次绘制水印图片内容，以便获取并保存 -->
  <view style