微信小程序背景加水印简单版

最新推荐文章于 2024-08-02 16:27:37 发布

codeyun.top

最新推荐文章于 2024-08-02 16:27:37 发布

阅读量2.2k

点赞数

分类专栏：小程序

原文链接：https://juejin.cn/post/6844903798045933582

版权

小程序专栏收录该内容

24 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在微信小程序中实现全页面动态水印功能，通过两种方法：一是利用canvas生成水印图片并转换为base64背景图，二是使用DOM元素模拟水印。作者发现DOM元素方法存在页面生命周期问题，导致水印信息更新不及时。解决方案是确保在用户切换登录时，所有页面被正确销毁，以确保水印信息的实时更新。最后，提供了使用canvas绘制水印的代码示例。

摘要由CSDN通过智能技术生成

小程序页面增加水印

效果

因为所有页面都要加水印，所以肯定是要用自定义组件实现。

思考路程

第一种

最开始考虑的是canvas生成图片，转换成base64做一张背景图，然后才了解到水印不能直接在元素上作为背景作为页面的最底层，很容易被其他东西覆盖，所以水印一定是要要fixed在页面的最顶层。 canvas生成图片，但是要借用其他插件转成base64

第二种

可以采用DOM元素靠样式实现，也不需要依赖插件，感觉这个更加的不错。于是就代码撸起来，然后每个页面都能有水印了，看起来是成功了。但是！！当切换登录人以后发现有的页面水印上的登录人怎么还是上一个登录人的信息呢？原来component的生命周期事件是依赖于所在页面的，如果页面从未销毁过，Component有些事件就不会再次触发了。于是，我产生了第一种思路，如何能让组件监听到所在页面的声明周期，看小程序文档确实有这样的方法，但是依赖的基础库版本比较高，那用户是低版本基础库岂不是不会生效了。emmmm再想想，那登录的时候保证让打开过的所有页面销毁就可以了啊，当前跳转登录页使用的方法是wx.navigateTo(会保留当前页面，然后跳转，所以有些页面不销毁，组件获取用户id的方法就不会触发第二次了)，那退出登录的时候调用wx.reLaunch（关闭所有页面，然后跳转页面）方法就ok

实现代码

使用canvas画图,使用upng.js插件将图片转化成base64 这里需要引入一些转base64的js，upng.js以及upng.js的依赖pako.min.js

github.com/photopea/UP…

import UPNG from './upng';

const CANVAS = 'water_mark_id';

Component({
  data: {
    text: '请勿外传',
    imgBase64: '',
    color:'rgba(0,0,0,0.5)'
  },
  attached() {
    const { text, color } = this.data;
    const ctx = wx.createCanvasContext(CANVAS, this);

    ctx.rotate((335 * Math.PI) / 180);
    ctx.setFontSize(20);
    ctx.setFillStyle(color);
    ctx.fillText(text, 0, 100);

    ctx.draw(false, () => {
      setTimeout(() => {
        wx.canvasGetImageData({
          canvasId: CANVAS,
          x: 0,
          y: 0,
          width: 120,
          height: 100,
          success: (res) => {
            const pngData = UPNG.encode([res.data.buffer], res.width, res.height);
            const base64 = wx.arrayBufferToBase64(pngData);
            this.setData({ imgBase64: 'data:img/jpg;base64,' + base64 });
          },
          fail: (err) => {
            console.log(err);
          }
        }, this);
      }, 2000); 
    });
  }
});

只需要修改里面的颜色clolor 和 text 文本就可以。页面引用组件

移步资源