水印添加方案_j*ascript图片处理_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

水印添加方案_j*ascript图片处理

2025-11-29

浏览次数：次

返回列表

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

水印添加方案_javascript图片处理

在前端实现水印添加功能时，J*aScript 提供了多种方式对图片进行处理，既能满足用户体验需求，又能有效防止内容盗用。核心思路是利用 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.s*e();
        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 图标作为水印，增强品牌识别度。

同样使用 canvas 绘图上下文
先绘制主图，再绘制 logo 图片（建议预加载）
控制 logo 的位置、大小和透明度
适合用于电商、摄影类网站的图片保护

关键点：

确保 logo 图片也设置了 crossOrigin 属性，避免 canvas 被标记为“污染”而无法导出数据。

SSP网店系统单用户免费普及版

前后台订单管理页添加商品缩图显示后台系统设置可直接对商品缩图大小进行设置去掉商品图片水印功能上传一张图片,可同时生成列表页缩图及商品详细页缩图,以不同的大小满足页面不同的需要商品收藏添加批量删除功能修改商品详细页会员等级显示BUG 优化缩图生成功能(注:因此次优化已更换上传内核,所以有可能会影响已上传商品图片数据) 加入简繁转换前台订单管理添加单订单在线支付功能修正VS081样式前台