一个多端兼容的uniapp水印插件，兼容h5-小程序-app

Waiting the wind

已于 2024-02-28 10:53:37 修改

阅读量356

点赞数 4

文章标签：前端 javascript 开发语言

于 2024-02-28 10:43:37 首次发布

本文链接：https://blog.csdn.net/m0_55811177/article/details/136339758

版权

<template>
    <canvas canvas-id="watermark" style="width: 690px;height:1040px; position: fixed;top: -10000px;"></canvas>
</template>

<script>
export default {
    data: () => ({
        ctx:null
    }),
    props: {
        title: {
            type: String,
            default: () => '这是水印~'
        },
        mobile: {
            type: String,
            default: () => ''
        },
        time: {
            type: String,
            default: () => ''
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.createWatemark();
        })
    },
    methods: {
        createWatemark() {
            this.ctx = uni.createCanvasContext('watermark', this);
            const title = this.title;
            const mobile = this.mobile;
            const appName= this.time;
            this.ctx.rotate((45 * Math.PI) / 185);
            this.ctx.setFontSize(26);
            this.ctx.setFillStyle('#000');
            for (let j = 1; j <10; j++) {
                //用for循环达到重复输出文字的效果，这个for循环代表纵向循环
                this.ctx.beginPath();
                this.ctx.setFontSize(26);
                this.ctx.setFillStyle('rgba(210,210,210,.6)');
                this.ctx.fillText(title, 0, 160 * j);
                
                this.ctx.setFontSize(20);
                this.ctx.fillText(mobile, 0, 160 * j + 26); 
                this.ctx.fillText(appName, 0, 160 * j + 50);
                                // fillText('内容'，x，y)；
                
                for (let i = 1; i <10; i++) {
                    //这个for循环代表横向循环，
                    this.ctx.beginPath();
                    this.ctx.setFontSize(26);
                    this.ctx.setFillStyle('rgba(210,210,210,.6)');
                    this.ctx.fillText(title, 220 * i, 160 * j);
                    
                    this.ctx.setFontSize(20);
                    this.ctx.fillText(mobile, 220 * i + 20, 160 * j + 26);
                    this.ctx.fillText(appName, 220 * i + 40, 160 * j + 50);
                }
            }
            for (let j = 0; j < 10; j++) {
                this.ctx.beginPath();
                this.ctx.setFontSize(26);
                this.ctx.setFillStyle('rgba(210,210,210,.6)');

                this.ctx.fillText(title, 0, -160 * j);
                this.ctx.setFontSize(20);
                this.ctx.fillText(mobile, 0, -160 * j + 26);
                this.ctx.fillText(appName, 0, -160 * j + 50);
                
                for (let i = 1; i < 10;i++) {
                    this.ctx.beginPath();
                    this.ctx.setFontSize(26);
                    this.ctx.setFillStyle('rgba(210,210,210,.6)');
                    this.ctx.fillText(title, 220 * i, -160 * j);
                    
                    this.ctx.setFontSize(20);
                    this.ctx.fillText(mobile, 220 * i + 20, -160 * j + 26);
                    this.ctx.fillText(appName, 220 * i + 40, -160 * j + 50);
                }
            }
            
            this.ctx.draw(false, setTimeout(() => {
                uni.canvasToTempFilePath({
                    canvasId:'watermark',
                    quality: 1,
                    success: (res) => {
						// #ifdef H5
                        this.$emit('CanvasImg',res.tempFilePath);
						// #endif
						// #ifdef MP
							uni.getFileSystemManager().readFile({ // 生成base64
							    filePath:res.tempFilePath,// 所需转码图像路径
							    encoding:"base64",// 转码类型
							    success:(res)=>{
							        let imageBase64='data:image/png;base64,'+res.data;
									this.$emit('CanvasImg',imageBase64)
							        console.log('转base64后：',imageBase64);
							    }
							})
						// #endif
						//#ifdef APP-PLUS
							  plus.io.resolveLocalFileSystemURL(
								res.tempFilePath,
								function (entry) {
								  entry.file(function (file) {
									var fileReader = new plus.io.FileReader();
									fileReader.readAsDataURL(file);
									fileReader.onloadend = function (evt) {
									  let imageBase64 = evt.target.result
									  this.$emit('CanvasImg',imageBase64)
									};
								  });
								}
							  );
						//#endif
                    }
                }, this);
            }, 300))
        }
    }
};
</script>

在页面使用如下

<template>
    <view>
        <Watermark @CanvasImg="((e)=>{postimg=e})"></Watermark>
        <view class="content" v-if="postimg"  :style="{background:`url(${postimg}) center center repeat`,backgroundSize:'100%'}">
            <view class="title">
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                postimg:'',//水印图
            }
        },
    }
</script>

<style lang="scss">
	.content{
		height: 100vh;
	}
</style>