HTML中如何给图片加水印_HTML中给图片加水印的代码示例

<div class="image-watermark-container">
    <img src="path/to/your-image.jpg" alt="示例图片" class="original-image">
    <span class="watermark-text">© MyBrand 2023</span>
</div>

<style>
.image-watermark-container {
    position: relative; /* 关键：使内部绝对定位的元素相对于它定位 */
    display: inline-block; /* 让容器宽度自适应图片，避免占据整行 */
    /* 你也可以设置一个固定的宽度和高度，或者 max-width */
    max-width: 100%; /* 确保图片容器不会溢出父元素 */
    overflow: hidden; /* 防止水印溢出容器 */
}

.original-image {
    display: block; /* 消除图片底部可能存在的额外空白 */
    max-width: 100%; /* 确保图片响应式 */
    height: auto; /* 保持图片比例 */
}

.watermark-text {
    position: absolute; /* 关键：使水印元素脱离文档流，可以自由定位 */
    bottom: 15px; /* 距离底部15px */
    right: 15px; /* 距离右侧15px */
    color: rgba(255, 255, 255, 0.7); /* 白色，70%透明度 */
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: rgba(0, 0, 0, 0.3); /* 半透明黑色背景，提升可读性 */
    padding: 5px 10px;
    border-radius: 3px;
    pointer-events: none; /* 关键：让鼠标事件穿透水印，作用到下面的图片上 */
    z-index: 10; /* 确保水印在图片之上 */
    /* 如果你想让水印旋转并居中 */
    /*
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    white-space: nowrap; // 防止文本换行
    */
}
</style>

<img id="originalImagePlaceholder" src="path/to/your-image.jpg" alt="原始图片" style="display: none;">
<div id="watermarkedImageOutput">
    <!-- 水印图片将在此处生成并显示 -->
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const originalImgSrc = document.getElementById('originalImagePlaceholder').src;
    const outputContainer = document.getElementById('watermarkedImageOutput');

    const img = new Image();
    img.crossOrigin = "Anonymous"; // 如果图片来自不同源，需要设置此属性以避免跨域污染Canvas
    img.src = originalImgSrc;

    img.onload = function() {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        canvas.width = img.width;
        canvas.height = img.height;

        // 1. 绘制原始图片
        ctx.drawImage(img, 0, 0);

        // 2. 绘制文本水印
        const watermarkText = "© My Website";
        ctx.font = "bold 40px Arial"; // 字体样式
        ctx.fillStyle = "rgba(255, 255, 255, 0.6)"; // 填充颜色与透明度
        ctx.textAlign = "right"; // 文本对齐方式
        ctx.textBaseline = "bottom"; // 文本基线

        // 计算水印位置（右下角）
        const textX = canvas.width - 20;
        const textY = canvas.height - 20;
        ctx.fillText(watermarkText, textX, textY);

        // 3. （可选）绘制一个旋转的重复水印，增加防盗难度
        ctx.save(); // 保存当前Canvas状态
        ctx.translate(canvas.width / 2, canvas.height / 2); // 将坐标原点移到Canvas中心
        ctx.rotate(-Math.PI / 4); // 旋转-45度（Math.PI / 4 等于45度）
        ctx.textAlign = "center";
        ctx.fillStyle = "rgba(255, 255, 255, 0.2)"; // 更低的透明度
        ctx.font = "bold 60px 'Times New Roman'";

        // 简单重复绘制，形成平铺效果
        const repeatText = "DO NOT COPY";
        const step = 200; // 重复间隔
        for (let i = -canvas.width; i < canvas.width; i += step) {
            for (let j = -canvas.height; j < canvas.height; j += step) {
                ctx.fillText(repeatText, i, j);
            }
        }
        ctx.restore(); // 恢复之前保存的Canvas状态

        // 4. 导出为新图片并显示
        const watermarkedImg = document.createElement('img');
        watermarkedImg.src = canvas.toDataURL('image/png'); // 可以是 'image/jpeg'
        watermarkedImg.alt = "带水印的图片";
        watermarkedImg.style.maxWidth = '100%';
        watermarkedImg.style.height = 'auto';
        outputContainer.appendChild(watermarkedImg);

        // 如果你不需要显示原始Canvas元素，可以隐藏它
        // canvas.style.display = 'none';
    };

    img.onerror = function() {
        console.error("图片加载失败:", originalImgSrc);
        outputContainer.innerHTML = "<p>图片加载失败，请检查路径。</p>";
    };
});
</script>