基于uni-app的小程序给view加文字水印_uniapp文字水印-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39993715/article/details/122918333

该博客介绍了一种在微信小程序中使用canvas生成带有时刻文字水印的图片的方法。首先在view中设置背景图片，然后通过canvas绘制文字并倾斜，最后将canvas转换为临时文件路径并返回。内容包括设置文字样式、尺寸、颜色、位置等，并展示了如何动态获取当前时间作为水印内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<view :style="'background-image:url(' + srcUrl + ');background-size: ' + canvasWidth + 'px 80px;'"></view>

<canvas canvas-id="firstCanvas" :style="'width: ' + canvasWidth + 'px; height: 80px;visibility: hidden;position: absolute;top:-500px'"></canvas>

onLoad() {
    getBackImage().then(function(data){
        that.canvasWidth = data.width;
        that.srcUrl = data.url;
    })
}

// 制作水印图片
getBackImage() {
    let text1 = "文字一";
    let time = new Date;
    // 当天的月日时分
    let text2 = (time.getMonth() + 1) + "" + time.getDate() + "" + time.getHours() + "" + time.getMinutes();
    // 根据文字长短找到适合的宽度
    let width = text1.length > text2.length ? (text1.length * 12 + 40) : (text2.length * 12 + 40);
    let height = 80;
    var ctx = uni.createCanvasContext("firstCanvas");
    ctx.setFontSize(12); // 设置文字大小
    ctx.rotate((-20 * Math.PI) / 180) // 设置文字倾斜度
    ctx.setFillStyle("rgba(192, 192, 192, 0.3)"); // 设置文字颜色
    ctx.setTextBaseline('middle'); // 设置位置
    ctx.setTextAlign('left'); // 设置展示位置
    ctx.fillText(text1, 0, height); // 填充文字一
    ctx.fillText(text2, 0, height - 30); // 填充文字二
            
    return new Promise(function(resolve, reject){
        ctx.draw(false,()=>{
          uni.canvasToTempFilePath({
              x: 0,
              y: 0,
              width: width,
              height: height,
              destWidth: width * 4,
              destHeight: height * 4,
              canvasId: "firstCanvas",
              quality: 1,
              success: function(res) {
                let obj = {
                    width: width,
                    url: res.tempFilePath
                }
                resolve(obj);
              } 
          })
        });
    });
}