水印添加方案_javascript图片处理-js教程-PHP中文网

水印添加方案_javascript图片处理

紅蓮之龍

发布： 2025-11-29 20:25:02

原创

851人浏览过

使用Canvas绘制文字水印，通过Image加载图片并用fillText添加透明、旋转的文字水印，输出为base64或Blob；2. 可叠加图片Logo水印，需预加载并设置crossOrigin避免污染；3. 批量处理时用Promise.all并行、压缩尺寸与质量优化性能，可结合Web Worker防阻塞；4. 前端水印仅为可见提示，无法完全防截图，需配合服务端校验，水印应覆盖关键区域、采用半透明平铺布局以提升防护效果。

水印添加方案_javascript图片处理

在前端实现水印添加功能时，JavaScript 提供了多种方式对图片进行处理，既能满足用户体验需求，又能有效防止内容盗用。核心思路是利用 Canvas 对原始图像绘制后叠加文字或图片水印，再输出为新的图片格式（如 base64 或 Blob）。以下是几种常见且实用的水印添加方案。

1. 使用 Canvas 绘制文字水印

通过 CanvasRenderingContext2D 可以将图片绘制到 canvas 上，并在其上添加透明文字水印。这种方式兼容性好，适用于大多数现代浏览器。

基本流程如下：

创建一个临时 canvas 元素
使用 Image 对象加载原始图片
图片加载完成后绘制到 canvas 上
调用 fillText 方法添加水印文字（可设置字体、颜色、透明度、旋转角度）
导出为 base64 图片数据或 Blob 用于显示或上传

示例代码片段：

function addTextWatermark(imageUrl, text, callback) {
  const img = new Image();
  img.crossOrigin = 'Anonymous'; // 避免跨域污染 canvas
  img.onload = function () {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;

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

    // 设置水印样式
    ctx.font = '20px Microsoft YaHei';
    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
    ctx.textAlign = 'center';
    ctx.globalAlpha = 0.3;

    // 多位置添加水印（例如网格状）
    const step = 100;
    for (let x = 0; x < canvas.width; x += step) {
      for (let y = 0; y < canvas.height; y += step) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(-Math.PI / 6);
        ctx.fillText(text, 0, 0);
        ctx.restore();
      }
    }

    // 输出结果
    canvas.toBlob((blob) => {
      callback(URL.createObjectURL(blob));
    }, 'image/jpeg', 0.9);
  };
  img.src = imageUrl;
}

登录后复制

2. 添加图片水印（Logo 叠加）

除了文字水印，也可以叠加一个小的 logo 图标作为水印，增强品牌识别度。

立即学习“Java免费学习笔记（深入）”；

慧博商城系统HuiboShop2011版

慧博商城系统HuiboShop慧博商城系统HuiboShop2011版 v1.3 更新：1.新添加功能，商品图片加水印功能。2.修改后台修改模板不能及时切换模板功能，3.还有前台图片错误问题 4.前台会员登录时间太短。慧博商城系统特色 1、上百套模板随意下载切换、模板定时更新； 2、csv数据导入、数据定向读取，一键导入商品信息，省时、省力； 3、多会员等级管理，一站搞定零售、批发、