这是一个小程序的公共组件，直接上代码：
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="/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核心代码部分是我再语雀看见的。感谢他
