使用canvas 图片添加文字水印，生成新的图片

    <div style="width:30%;float:left;">
        <canvas id="canvas"></canvas>
    </div>

  addTextToImage(imagePath, text, date) {
            var canvas = document.querySelector("canvas");
            var context = canvas.getContext("2d");
            // canvas 大小
            canvas.width = document.documentElement.clientWidth;
            canvas.height = document.documentElement.clientHeight - 102;
            // Draw Image function
            var img = new Image();
            img.src = imagePath;
            img.onload = function () {
                //等比例缩小图片
                var scale = 1;
                var size = 750; // 可以根据具体的要求去设定
                if (this.width > size || this.height > size) {
                    if (this.width > this.height) {
                        scale = size / this.width;
                    } else {
                        scale = size / this.height;
                    }
                }
                context.width = this.width * scale;
                context.height = this.height * scale; // 计算等比缩小后图片
                context.drawImage(img, 0, 0, context.width, context.height);
                context.lineWidth = 1;
                context.font = "23px orbitron";
                //context.fillText(text, 20, 550);
                context.fillText(date, 260, 700);
                let x = 30, y = 50; // 文字开始的坐标
                var j = 0;
                let letterSpacing = 5; // 设置字间距
                for (let i = 0; i < text.length; i++) {
                    const str = text.slice(i, i + 1).toString();
                    if (str.match(/[A-Za-z0-9]/) && (y < 600)) { // 非汉字 旋转
                        context.save();
                        context.translate(x, y);
                        context.rotate(Math.PI / 180 * 90);
                        context.textBaseline = 'bottom';
                        context.fillText(str, 0, 0);
                        context.restore();
                        y += ctx.measureText(str).width + letterSpacing; // 计算文字宽度
                    } else if (str.match(/[\u4E00-\u9FA5]|[,.!，。！]/) && (y < 600)) {
                        context.save();
                        context.textBaseline = 'top';
                        context.fillText(str, x, y);
                        context.restore();
                        y += context.measureText(str).width + letterSpacing; // 计算文字宽度
                    } else if (str.match(/[\u4E00-\u9FA5]|[,.!，。！]/) && (y > 600)) {
                       //文字换行
                        if (i - j == 22) {
                            j = i;
                            x = x + 40;
                            y = 40 + i + 10;
                        }
                        context.save();
                        context.textBaseline = 'top';
                        context.fillText(str, x, y);
                        context.restore();
                        y += context.measureText(str).width + letterSpacing; // 计算文字宽度
                    }
                }
            };
        },