uni 微信小程序 canvas 文字 水印

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>