crm-app-vue3/js_sdk/ly-watermark/commons/watermark.js

const VIEW_ID = '1.23452384164.123412415';
export default {
	data() {
		return {
			showCanvas: true,
			canvasSize: uni.upx2px(375),
			canvasFontSize: uni.upx2px(18),
			canvasTextColor: 'rgba(200, 200, 200, 0.60)',
			canvasRotate: -30 * Math.PI / 180,
			canvasTextAlign: 'left',
			canvasTextBaseline: 'middle',
			canvasTextFillX: uni.upx2px(-50),
			canvasTextFillY: uni.upx2px(170),
			watermarkView : undefined,
		}
	},
	
	watch: {
		canvasText(newVal) {
			this.updateWatermark()
		}
	},
	
	methods: {
		show() {
			// #ifdef APP-PLUS
			plus.nativeObj.View.getViewById(VIEW_ID) !== null && plus.nativeObj.View.getViewById(VIEW_ID).show();
			// #endif

			// #ifdef H5
			if (document.getElementById(VIEW_ID)) {
				document.getElementById(VIEW_ID).style.visibility = "visible";
			}
			// #endif
		},
		
		hide() {
			// #ifdef APP-PLUS
			plus.nativeObj.View.getViewById(VIEW_ID) !== null && plus.nativeObj.View.getViewById(VIEW_ID).hide();
			// #endif

			// #ifdef H5
			if (document.getElementById(VIEW_ID)) {
				document.getElementById(VIEW_ID).style.visibility = "hidden";
			}
			// #endif
		},
		
		updateWatermark() {
			if (!this.userName) throw new Error('userName is Requied!');
			
			// #ifdef APP-PLUS  
			this.watermarkView && this.watermarkView.reset();
			this.drawAppWaterMark(VIEW_ID);
			// #endif  
			
			// #ifdef H5  
			this.drawH5WaterMark(VIEW_ID);
			// #endif  
		},
		
		initWatermark() {
			if (!this.userName) throw new Error('userName is Requied!');
			// #ifdef APP-PLUS  
			this.drawAppWaterMark(VIEW_ID);
			// #endif  
			
			// #ifdef H5  
			this.drawH5WaterMark(VIEW_ID);
			// #endif  
			
			uni.$off('ly-show-watermar');
			uni.$off('ly-hide-watermark');
			
			// 全局监听事件，触发水印显示
			uni.$on('ly-show-watermark', () => {
				this.show();
			});
			
			// 全局监听事件，触发水印隐藏
			uni.$on('ly-hide-watermark', () => {
				this.hide();
			});
		},
		
		// #ifdef APP-PLUS
		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.deptName + "-" + this.nickName, this.canvasTextFillX, this.canvasTextFillY);
			cans.fillText(this.time, this.canvasTextFillX, this.canvasTextFillY + 20);
			cans.draw(false);
			this.canvasDrawCallFn(id);
		},
		
		// 利用canvas生成水印图片
		canvasDrawCallFn(id) {
			// 适当的延时确保绘制完毕
			setTimeout(() => {
				uni.canvasToTempFilePath({
					canvasId: "watermarkCanvas",
					success: res => {
						let viewList = this.getWaterMarkWebview(res);
						this.watermarkView = new plus.nativeObj.View(id, {
							top: '0',
							left: '0',
							right: '0',
							bottom: '0'
						}, viewList);
				
						// 拦截View控件的触屏事件,将事件穿透给下一层view  
						this.watermarkView.interceptTouchEvent(false);
						this.watermarkView.show();
						// this.showCanvas = false;
					}
				});
			}, 100);
		},
		
		// 创建webview页面水印样式
		getWaterMarkWebview(res) {
			let sysInfo = uni.getSystemInfoSync(),
				row = Math.ceil(sysInfo.windowHeight / this.canvasSize), // 水印排列行数
				imgList = [];

			for (let i = 0; i < row; i++) {
				for (let j = 0; j < 3; 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;
		},
		// #endif
		
		// #ifdef H5
		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);

			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);
		}
		// #endif
	}
}