学习笔记——uni-app实现页面多行水印

---

使用uni-app框架时，有时会看到页面有多行水印。如何实现呢？

1.引入watermark全局水印插件

首先，我们需要下载该插件。在uni-app的插件市场就可以找到。再使用HBulider将插件导入你的项目就可以了。

<!-- #ifdef APP-PLUS -->
<canvas v-if="showCanvas" class="watermarkCans" canvas-id="watermarkCans"></canvas>
<!-- #endif -->

​import watermark from '@/js_sdk/ly-watermark/commons/watermark.js';

export default {
    data() {
        return {
            canvasText: 'ERP系统'
        }
    }
}

​

.watermarkCans {
    width: 250upx;
	height: 250upx;
	position: absolute;
	z-index: -1;
}

2.实现多行水印

以上的操作只能实现单行配置，如果需要实现多行水印，我们还需要修改watermark全局水印插件的源码。

首先，需要再你需要水印的页面，多添几个数据，这些数据中保存这你想水印的内容。

​import watermark from '@/js_sdk/ly-watermark/commons/watermark.js';

export default {
    data() {
        return {
            canvasText: 'ERP系统',
            canvasText1: '2020-11-24'
        }
    }
}

接着找到watermark全局水印插件源码。

 

在一些地方略微改动即可。

data() {
    return {
	    showCanvas: true,
		canvasText: '',
		canvasText1: '',        // 新增
		canvasSize: uni.upx2px(250),
		canvasFontSize: uni.upx2px(30),
		canvasTextColor: 'rgba(200, 200, 200, 0.50)',
		canvasRotate: -30 * Math.PI / 180,
		canvasTextAlign: 'left',
		canvasTextBaseline: 'middle',
		canvasTextFillX: uni.upx2px(-50),
		canvasTextFillY: uni.upx2px(170)
    }
},

drawAppWaterMark(id) {
    plus.nativeObj.View.getViewById(id) && plus.nativeObj.View.getViewById(id).close();
    let cans = uni.createCanvasContext('watermarkCanvas');
	cans.rotate(this.canvasRotate);
	cans.setFontSize(this.canvasFontSize);
	cans.setFillStyle(this.canvasTextColor);
	cans.setTextAlign(this.canvasTextAlign);
	cans.setTextBaseline(this.canvasTextBaseline);
	cans.fillText(this.canvasText, this.canvasTextFillX, this.canvasTextFillY);
    // 新增
	cans.fillText(this.canvasText1, this.canvasTextFillX, this.canvasTextFillY + 20);    
	cans.draw(false);
	this.canvasDrawCallFn(id);
},

drawH5WaterMark(id) {
               document.getElementById(id)&&document.body.removeChild(document.getElementById(id));
let can = document.createElement('canvas');
let cans = can.getContext('2d');
let div = document.createElement('div');
can.width = this.canvasSize;
can.height = this.canvasSize;
cans.rotate(this.canvasRotate);
cans.font = this.canvasFontSize + 'px sans-serif';
cans.fillStyle = this.canvasTextColor;
cans.textAlign = this.canvasTextAlign;
cans.textBaseline = this.canvasTextBaseline;
cans.fillText(this.canvasText, this.canvasTextFillX, this.canvasTextFillY);
// 新增
cans.fillText(this.canvasText1, this.canvasTextFillX, this.canvasTextFillY + 20);
div.id = id;
div.style.pointerEvents = 'none';
div.style.top = '0';
div.style.left = '0';
div.style.bottom = '0';
div.style.right = '0';
div.style.position = 'fixed';
div.style.zIndex = '100000';
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
document.body.appendChild(div);
}

3.注意：

当要在app中看到多行水印的话，一定要注意template中的canvas-id的值，是否与插件源码中两处的值相同。

                                

4.遇到的坑：

在使用水印时，在手机端或平板电脑上有时不会铺满，需要改变插件的源码

// 创建webview页面水印样式
getWaterMarkWebview(res) {
    let sysInfo = uni.getSystemInfoSync(),
        row = Math.ceil(sysInfo.windowHeight / this.canvasSize), // 水印排列 行数
		col = Math.ceil(sysInfo.windowWidth / this.canvasSize), // 水印排列 列数
		imgList = [];
	for (let i = 0; i < row; i++) {
		for (let j = 0; j < col; j++) {
		    imgList.push({
			    tag: 'img',
				src: res.tempFilePath,
				position: {
				    top: (this.canvasSize * i) + 'px',
					left: (this.canvasSize * j) + 'px',
					width: this.canvasSize + 'px',
					height: this.canvasSize + 'px'
				}
			});
		}
	}

return imgList;
},

---

以上就是实现多行水印的方法。uni-app插件市场的官网还有如何激活或隐藏水印的操作。