当前位置：首页 > news >正文

uniapp app端水印组件封装一次引入版

news 2025/6/25 9:44:11

直接上代码

<template><view><canvas canvas-id="myCanvas"style="width: 100vw; height: 100vh;opacity: 0;position: fixed;top: -1000px;"></canvas></view>
</template><script>export default {name: "watermark",data() {return {screenWidth: '',screenHeight: ''};},mounted() {// 获取屏幕宽高this.screenWidth = plus.screen.resolutionWidth;this.screenHeight = plus.screen.resolutionHeight;// 初始化画布this.init()},methods: {show(path) {const view = new plus.nativeObj.View('watermark', {top: '0px',left: '0px',height: '100%',width: '100%',opacity: 0.2});let popupViewContentList = [{src: path,id: "logo",tag: "img",position: {top: "0px",left: "0px",width: this.screenWidth + 'px',height: this.screenHeight + "px",}}]view.draw(popupViewContentList);view.interceptTouchEvent(false)view.show()// uni全局引用 方便个别页面关闭uni.$view = view},init() {let that = thisconst ctx = uni.createCanvasContext('myCanvas', this);// 在 Canvas 上绘制图形、文本等let angleInRadians = -45 * Math.PI / 180;// 将原点移动到画布中心ctx.translate(this.screenWidth / 2, this.screenHeight / 2);// 旋转画布ctx.rotate(angleInRadians);// 绘制透明背景ctx.fillStyle = 'rgba(0, 0, 0, 0)';ctx.fillRect(-100, -1000, this.screenWidth, this.screenHeight);ctx.setFillStyle('#000');ctx.setFontSize(12);for (let i = 0; i < 100; i++) {for (let j = 0; j < 6; j++) {ctx.fillText( new Date(), 300 * j - 600, 40 * i - 1000);}}// ctx.rotate('45')ctx.draw(true, () => {// 画布转换图片uni.canvasToTempFilePath({canvasId: 'myCanvas',fileType: 'png',x: 0,y: 0,width: this.screenWidth,height: this.screenHeight,quality: 1,complete: function(res) {// 创建水印that.show(res.tempFilePath)},});});}}}
</script><style>
</style>