微信小程序页面添加水印（防截屏和隐私保护）

这是一个小程序的公共组件，直接上代码：

index.js

// components/watermark/index.js
// 因为安全原因 svg 需转译以便作为背景图使用，也可直接在浏览器中打开
// 因为要保留 xvg 可读性，所以使用自定义方法进行转义
const svgToUrl = str => {return `data:image/svg+xml,${str.replace(/\n/g, '').replace(/<!--(.*)-->/g, '') // 必须去掉注释.replace(/[\r\n]/g, ' ') // 最好去掉换行.replace(/"/g, "'") // 单引号是保留字符，双引号改成单引号减少编码.replace(/%/g, '%25').replace(/&/g, '%26').replace(/#/g, '%23').replace(/{/g, '%7B').replace(/}/g, '%7D').replace(/</g, '%3C').replace(/>/g, '%3E')}`;
};/*** 生成 svg 字符串* @param {object} options 参数* text 水印文字* <text> 属性（x y transform） 方向位置按需调整* <svg> 中fill属性决定字体颜色*/
const getCanvasUrl = (options, user) => {const {text = `${new Date().toLocaleDateString()} ${user.name || ''}`,width = 187.5,height = 112.5,fontSize = 16,color = 'rgb(128,128,128)',fontFamily = 'inherit',} = options || {};return `<svgwidth="${width}"height="${height}"fill="${color}"xmlns="http://www.w3.org/2000/svg"><textx="65%"y="55%"transform="rotate(-31, 100 100)"font-size="${fontSize}"font-family="${fontFamily}"text-anchor="middle"dominant-baseline="middle">${text}</text><textx="65%"y="55%"transform="rotate(-31, 140 100)"font-size="13"font-family="${fontFamily}"text-anchor="middle"dominant-baseline="middle">${user.idCard || ''}</text></svg>`;
};Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {},ready() {let user = {name:'*******',idcard:'***************************'};if (userProp.name) {this.setData({watermarkBck: `background: url("${svgToUrl(getCanvasUrl(null, user))}") repeat`,})}},
})

index.wxml:

<view style="{{'width:100%;height:100%;position:fixed;top:0;left:0;z-index: 9999;pointer-events:none;opacity:0.2;' + watermarkBck}}" />

index.wxss:空

index.json

{"component": true,"usingComponents": {}
}

注：这个js核心代码部分是我再语雀看见的。感谢他

微信小程序页面添加水印（防截屏和隐私保护）相关推荐

微信小程序怎么实现防止截屏
小程序防止手机截屏, 禁止截屏录屏手机截屏或者录屏时,禁止调用,并提示无法截屏. 注意⚠️ 目前仅支持安卓设备使用!!! ( 2021年10月29日发帖 ) 配置参数如下: visualEffect ...
springboot+vue基本微信小程序的疫情防控平台系统计算机毕业设计
本文讲述了基于微信小程序的疫情防控平台系统的设计与实现.结合电子管理系统的特点,分析了疫情防控平台系统的现状,给出了基于微信小程序的疫情防控平台系统实现的设计方案.本论文主要完成不同用户的权限划分,不 ...
基于微信小程序社区疫情防控系统
基于微信小程序社区疫情防控系统小程序社区疫情防控系统的设计主要是对系统所要实现的功能进行详细考虑,确定所要实现的功能后进行界面的设计,在这中间还要考虑如何可以更好的将功能及页面进行很好的结合,方便用 ...
微信小程序社区疫情防控+后台管理系统|前后分离VUE
<微信小程序社区疫情防控+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序前台和Java做的后台管理系统,该后台采 ...
计算机实战项目、毕业设计、课程设计之[含论文+辩论PPT+源码等]微信小程序社区疫情防控+后台管理|前后分离VUE[包运行成功
<微信小程序社区疫情防控+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序前台和Java做的后台管理系统,该后台采 ...
计算机实战项目之 [含论文+辩论PPT+源码等]微信小程序社区疫情防控+后台管理|前后分离VUE[包运行成功
<微信小程序社区疫情防控+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序前台和Java做的后台管理系统,该后台采 ...
nodejs+vue 微信小程序的疫情防控平台系统
功能介绍考虑到实际生活中在疫情防控平台方面的需要以及对该系统认真的分析,将系统权限按服务端和客户端这两类涉及用户划分. (a) 服务端--管理员:管理员使用本系统涉到的功能主要有:个人中心.用户管理 ...
微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...

微信小程序页面添加水印（防截屏和隐私保护）

微信小程序页面添加水印（防截屏和隐私保护）相关推荐

最新文章

热门文章