js页面截屏添加水印

基础概念

页面截屏是指将网页的当前视图保存为图像文件的过程。在前端开发中，这通常通过JavaScript实现。添加水印是指在图像上叠加一些文本或图形，以标识图像的来源或版权信息。

类型

文本水印：在图像上添加文字信息。
图像水印：使用另一个小图像作为水印叠加在主图像上。

应用场景

社交媒体分享：在分享截图时保护内容不被滥用。
内部报告：在生成的报告截图中添加公司标识。
法律文件：确保截图中的敏感信息不被篡改。

实现方法

以下是一个简单的JavaScript示例，展示如何在页面截屏时添加文本水印：

function addWatermark() {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();
    img.src = 'path_to_your_image.jpg'; // 替换为实际图片路径

    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);

        // 添加水印
        ctx.font = '20px Arial';
        ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
        ctx.fillText('Your Watermark Text', 10, 30);

        // 将canvas转换为图片
        const watermarkedImage = canvas.toDataURL('image/png');
        document.body.appendChild(new Image().src = watermarkedImage);
    };
}

// 调用函数
addWatermark();