如何使用javascript实现给图片添加水印功能【由通义千问生成】

            
            // 1. 创建一个Image对象
var img = new Image();
img.src = 'https://uovol.com/static/material/300x200.svg'; // 图片URL

// 创建一个 Canvas 元素
var canvas = document.createElement('canvas');

// 2. 等待图片加载完成
img.onload = function() {
    // 3. 设置Canvas元素大小与原始图片相同
    canvas.width = this.naturalWidth;
    canvas.height = this.naturalHeight;

    // 4. 获取Canvas的2D渲染上下文
    var ctx = canvas.getContext('2d');

    // 5. 将原始图片绘制到Canvas上
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    // 6. 定义水印内容（文本或图片）
    var watermarkText = 'Watermark Text';
    var watermarkFont = '24px Arial';
    var watermarkColor = 'rgba(255, 255, 255, 0.5)';
    var watermarkX = canvas.width - 100; // 水印x坐标
    var watermarkY = canvas.height - 30; // 水印y坐标

    // 7. 绘制水印文本
    ctx.font = watermarkFont;
    ctx.fillStyle = watermarkColor;
    ctx.textAlign = 'right';
    ctx.fillText(watermarkText, watermarkX, watermarkY);

};

document.body.append(canvas)