1.新建一個組件文件 **.vue,填寫一下內容

<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 time= 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) => {
                        console.log(res)
                        this.$emit('CanvasImg',res.tempFilePath);
                    }
                }, this);
            }, 300))
        }
    }
};
</script>

<style lang="scss">
</style>

2.在頁面 引入 新建水印 組件以及使用,代碼如下：

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

<script>
    import waterMark from '@/components/ylt-watermark/ylt-watermark.vue';
    export default {
        components: {
            waterMark
        },
        data() {
            return {
                postimg:'',//水印圖
            }
        },
        methods: {
            
            
            /* 生成文字水印 圖  */
            CanvasImg(url){
                console.log(url);
                uni.getFileSystemManager().readFile({// 【重點來啦】人家自提供的轉碼API
                    filePath:url,// 所需轉碼圖像路徑
                    encoding:"base64",// 轉碼類型
                    success:(res)=>{
                        // 生成base64
                        let imageBase64='data:image/png;base64,'+res.data;
                        
                        this.postimg = imageBase64;
                        console.log('轉base64后：',imageBase64);
                    }
                })
            },
        },
    }
</script>

<style lang="scss">
    .content {
        width: 100%;
        box-sizing: border-box;
        padding: 32px 32rpx 120rpx;

        .title {
            margin-bottom: 32rpx;
            font-size: 36rpx;
            font-weight: 600;
            text-align: left;
            color: #464646;
            line-height: 50rpx;
        }
    }
</style>