canvas watermark

[diveDylan]

水印是图片经常用到的一种工具处理，本次项目开发中刚好涉及，一下代码记录下实现。

/**
     * 水印
     * @param {*} ctx canvas paint
     * @param {*} w 
     * @param {*} maxW canvas width
     */
    waterMark(ctx, w, maxW) {
      while (w < maxW) {
        const REPEAT_NUM = 3; //  取巧重复x方向
        const text = `潜水党专用    `; // 水印文本 空格用于x间隙
        const waterMarkText = text.repeat(REPEAT_NUM);
        ctx.translate(w, 200);
        ctx.globalAlpha = 0.3;
        ctx.fillStyle = '#fff';
        ctx.font = '32px Josefin Slab';
        ctx.rotate(-45 * Math.PI / 180);
        ctx.fillText(waterMarkText, 0, 0);
        ctx.rotate(45 * Math.PI / 180); // 画笔角度恢复
        w = w + 20;
      }
    }

[ahKevinXy]

this code can see ?

[diveDylan]

this code can see ?

弄一个canvas，然后执行以下代码

[diveDylan]

this code can see ?

vite-demo-for-watermark