
前阵子接了个需求，运营那边要给用户上传的作品图自动打上版权水印，防止被人扒图盗用。听起来是个小活儿，我一开始也没当回事，心想不就是 `fillText` 往图上写行字嘛。结果真做起来，Retina 屏模糊、水印被裁掉、透明度压不住底图……坑一个接一个。折腾了两天才算稳定，这里把过程和几段能直接跑的代码整理出来，给同样要做这事的同学省点时间。

先说清楚范围：这篇讲的是**给你自己的图加水印**，比如给自己的作品盖版权标记、给导出的报表打个来源。不涉及去除别人水印那类事情——那既没技术含量也容易踩版权红线，不碰。

## 先把底图画对：devicePixelRatio 这个坑必须第一个填

我第一版代码是这样的，画布尺寸直接等于图片尺寸：

```js
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
```

在我自己的 MacBook 上一预览，水印文字边缘糊成一团，跟蒙了层毛玻璃似的。查了半天才反应过来：这是 Retina 屏的老问题。设备像素比（`devicePixelRatio`）是 2，CSS 里 canvas 显示成 300px 宽，实际只有 300 个物理像素在渲染 600 个屏幕点，浏览器强行拉伸，能不糊吗。

正确做法是把画布的物理分辨率乘上 dpr，再用 CSS 把显示尺寸缩回去：

```js
function setupCanvas(canvas, cssWidth, cssHeight) {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = Math.round(cssWidth * dpr);
  canvas.height = Math.round(cssHeight * dpr);
  canvas.style.width = cssWidth + 'px';
  canvas.style.height = cssHeight + 'px';
  const ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);   // 关键：后续所有绘制用 CSS 坐标，ctx 自动放大
  return ctx;
}
```

这里有个容易忽略的点：`ctx.scale(dpr, dpr)` 之后，你写 `fillText('版权', 10, 20)` 里的坐标全都是 CSS 逻辑坐标，不用自己再乘 dpr，ctx 内部帮你放大。我第一次没搞明白，手动又乘了一遍，结果文字跑到画布外面去了，白排查半天。

不过要提醒一句：如果你的目的是**导出成图片文件**存到服务端，而不是屏幕预览，那 dpr 反而不该跟着屏幕走。因为最终文件的清晰度只取决于画布的物理像素，和用户是不是 Retina 屏无关。这种场景我一般固定按原图分辨率画，或者手动指定一个导出倍率（比如 2x），跟屏幕解耦。别让预览逻辑和导出逻辑共用同一套尺寸计算，这俩需求经常打架——我们组里就出过一次事故：预览用了 dpr 缩放，导出直接复用同一个 canvas 上传，结果服务端存下来的图全是屏幕两倍大小，白白占了几倍存储，还是用户投诉图片体积异常才发现。

顺带说个反直觉的现象：`ctx.imageSmoothingEnabled` 默认是开的，缩放图片时浏览器会做插值平滑。画水印文字不受影响，但如果你的底图本身要缩小很多倍再画，关掉平滑反而更糊，开着才对。这个属性和 dpr 没关系，但两个一起调的时候很容易互相甩锅，排查时记得分开验证。

## 文字水印：字号得跟着图片大小走

第二个教训是字号不能写死。我一开始 `ctx.font = '24px sans-serif'`，小图上 24px 糊满整张脸，大图上又小得跟蚂蚁一样看不清。用户上传的图从几百像素的头像到四五千像素的长图都有，一个固定字号根本没法通吃。

后来改成按图片较短边的百分比算字号，间距也一样跟着缩放：

```js
function drawTextWatermark(ctx, text, w, h) {
  const fontSize = Math.max(14, Math.round(Math.min(w, h) * 0.04));
  ctx.font = `${fontSize}px "PingFang SC", sans-serif`;
  ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
  ctx.textBaseline = 'bottom';
  ctx.textAlign = 'right';
  // 右下角留出边距，位置随图尺寸自适应
  const margin = fontSize * 0.8;
  ctx.fillText(text, w - margin, h - margin);
}
```

`textAlign = 'right'` 配合右下角坐标，不管图多宽水印都贴着右下角，不用自己算文字宽度做减法。要是想放正中间就 `textAlign='center'` 加 `textBaseline='middle'`，坐标给 `w/2, h/2`。

透明度我用 `rgba` 的 alpha 通道控制，也可以用 `ctx.globalAlpha`。两者区别在于：`globalAlpha` 会作用于之后所有绘制操作，是全局开关，画完记得改回 1，不然把后面的东西也一起透明了；`rgba` 只管这一次填充，更省心。我倾向于单个水印用 rgba，整块平铺水印统一压透明度才用 globalAlpha。

还有个可读性的细节值得抠一下。纯白半透明水印压在浅色或高频细节的底图上，经常糊得看不清。我的处理是给文字加一层很淡的描边或阴影，让它在任何底色上都有对比：

```js
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
ctx.strokeStyle = 'rgba(0, 0, 0, 0.25)';
ctx.lineWidth = 1;
ctx.strokeText(text, x, y);   // 先描边
ctx.fillText(text, x, y);     // 再填充压在上面
```

先 `strokeText` 再 `fillText`，描边在下、填充在上，白字外面裹一圈半透明黑边，亮底暗底都能看清。`shadowColor` + `shadowBlur` 也能做类似效果，但阴影在平铺大量文字时性能开销明显，几百个字一铺能卡出感觉，所以密集平铺我用描边，单个角标才用阴影。

## 防裁剪：斜向平铺才是正解

只在右下角打一个水印，随手一裁就没了。运营的原话是"要让人裁不掉"。这就得铺满整张图，而且斜着铺——正着铺容易被沿网格裁，斜 30 度左右最难对付。

核心技巧是 `translate` 把原点挪到图片中心，`rotate` 旋转整个坐标系，然后在一个比图大一圈的范围里循环画，多画出去的部分会被画布自动裁掉，正好保证边角也铺满：

```js
function drawTiledWatermark(ctx, text, w, h) {
  const fontSize = Math.max(14, Math.round(Math.min(w, h) * 0.03));
  ctx.save();
  ctx.globalAlpha = 0.12;              // 平铺水印压得很淡，不挡主体
  ctx.font = `${fontSize}px sans-serif`;
  ctx.fillStyle = '#ffffff';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  ctx.translate(w / 2, h / 2);
  ctx.rotate(-30 * Math.PI / 180);     // 斜 30 度

  const gapX = fontSize * 8;
  const gapY = fontSize * 5;
  // 对角线长度做半径，保证旋转后四角都盖到
  const diag = Math.sqrt(w * w + h * h);
  for (let x = -diag; x < diag; x += gapX) {
    for (let y = -diag; y < diag; y += gapY) {
      ctx.fillText(text, x, y);
    }
  }
  ctx.restore();
}
```

这里 `ctx.save()` / `ctx.restore()` 是必须的，否则 `translate` 和 `rotate` 的坐标变换会污染后续绘制。我早期漏了 restore，结果一张图画完再画下一张时坐标系是歪的，输出一堆废图，排查时一脸懵。养成 save/restore 成对写的习惯，能少掉很多头发。

循环范围用对角线长度 `diag` 而不是 `w`，是因为坐标系转了 30 度之后，原来的矩形边界不再对齐坐标轴，只有用足够大的正方形范围去铺，才能保证旋转后图片四个角都被覆盖。这个我一开始用 `w` 和 `h` 当边界，斜过去之后左上和右下两个角就空了一片，被测试同学一眼揪出来。

## 图片水印和混合模式

除了文字，产品经理还想要个 logo 图标水印。图片水印本身就是再 `drawImage` 一次的事：

```js
function drawLogoWatermark(ctx, logo, w, h) {
  const lw = Math.round(w * 0.15);
  const lh = Math.round(lw * logo.naturalHeight / logo.naturalWidth);
  ctx.save();
  ctx.globalAlpha = 0.7;
  ctx.drawImage(logo, w - lw - 20, h - lh - 20, lw, lh);
  ctx.restore();
}
```

这里 logo 图要提前加载好，逻辑和底图一样走 `loadImage` 那套 Promise。有个细节：logo 用 PNG 带透明通道的图，`drawImage` 会正确保留透明区域，不会给你糊一块白底；但如果 logo 是 JPEG，它没有 alpha 通道，透明部分会变成实心底色，盖在图上一块难看的方框。所以水印 logo 一律用 PNG 或 WebP，别拿 JPEG 凑合。

值得单独说的是 `globalCompositeOperation`（混合模式）。默认的 `source-over` 就是普通叠加，多数情况够用。但遇到深色底图，白字水印看不清；浅色底图，白字又糊掉。这时候可以试 `overlay` 或 `soft-light` 这类混合模式，让水印跟底图亮度产生反应，深处提亮、亮处压暗，比硬叠一层半透明白色自然：

```js
ctx.globalCompositeOperation = 'overlay';
// ...画水印
ctx.globalCompositeOperation = 'source-over';  // 记得改回来
```

不过混合模式的效果非常吃底图内容，没有一个模式能通吃所有图。我的做法是给默认值（普通半透明叠加），混合模式当高级选项，让真在意效果的人自己挑。别指望一套参数搞定所有图，那是幻想。

## 批量加水印与导出

真到生产环境，都是一批图一起处理。逻辑就是把上面几步包成一个函数，循环喂图。异步这块要注意，图片 `onload` 是异步的，得等图真加载完再画，我习惯包成 Promise：

```js
function loadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'anonymous';   // 跨域图必须加，否则 canvas 被污染无法导出
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  });
}

async function watermarkBatch(list, text) {
  const results = [];
  for (const item of list) {
    const img = await loadImage(item.url);
    const canvas = document.createElement('canvas');
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    drawTiledWatermark(ctx, text, canvas.width, canvas.height);
    const blob = await new Promise(r => canvas.toBlob(r, 'image/jpeg', 0.92));
    results.push({ name: item.name, blob });
  }
  return results;
}
```

导出我用 `toBlob` 不用 `toDataURL`。`toDataURL` 返回 base64 字符串，大图能撑出好几 MB 的字符串，内存吃紧还得再转成二进制上传；`toBlob` 直接给 Blob 对象，能直接塞进 `FormData` 上传，对大图友好得多。JPEG 质量参数我给 0.92，再往下压水印边缘会出噪点。

跨域这个坑也得念叨一句：`img.crossOrigin = 'anonymous'` 必须在设 `src` 之前设置，而且图片服务端得返回允许跨域的响应头，否则一旦画布被"污染"，`toBlob` 直接抛 SecurityError，前功尽弃。我们后来把处理逻辑挪到同域下才彻底绕开。这类图片工具站（比如 tudingai.cn 这种在线处理的）多半也是这个原因才把图放同域。

批量处理还有个性能问题：几十张大图串行跑，主线程会卡住，页面转圈。量大的话建议挪到 Web Worker 里用 `OffscreenCanvas` 处理，主线程只管调度，界面不冻。`OffscreenCanvas` 的 API 和普通 canvas 几乎一样，`getContext('2d')`、`drawImage`、`convertToBlob` 都在，迁移成本不高，主要是图片解码要用 `createImageBitmap` 替代 `new Image()`，因为 Worker 里没有 DOM。

我实际做的时候还加了个并发闸门，不是无脑串行也不是全部并行——串行慢，全并行几十张一起解码内存直接爆。折中是维护一个并发上限（比如 3 张同时处理），处理完一张再放一张进来：

```js
async function runWithLimit(tasks, limit) {
  const results = [];
  const executing = new Set();
  for (const task of tasks) {
    const p = task().then(r => { executing.delete(p); return r; });
    executing.add(p);
    results.push(p);
    if (executing.size >= limit) await Promise.race(executing);
  }
  return Promise.all(results);
}
```

这个模式不光加水印能用，任何"批量异步、又不想撑爆资源"的场景都通用，算是顺手攒下的一个小工具。

## 诚实的边界

写到这儿得说几句实在话，免得有人照搬翻车。

Canvas 加的水印，本质是把像素叠进图里，**它防的是"顺手盗图"，不是"铁了心要抠"**。淡色平铺水印，用现在的一些工具能修掉不少；就算是深色实心水印，有耐心的人也能 P 掉。想真正锁死版权，得靠不可见的数字盲水印（把版权信息编码进频域，肉眼看不见、裁剪压缩后还能提取），那是另一套技术，Canvas 这层只是第一道门槛。

另外 `globalCompositeOperation` 的浏览器一致性我没在所有环境验证过，混合模式在个别老版本浏览器上表现有差异，上线前该测的还得测。字体也是个隐患——`ctx.font` 里指定的字体如果用户机器上没有，会静默回退到默认字体，水印样子就变了，对视觉一致性有要求的话建议用 web font，并确认字体加载完成再画。

就这些。水印这活儿看着简单，真做到"清晰、自适应、不被轻易裁掉、还能批量稳定导出"，每一环都有它自己的脾气。希望上面这些坑能让你少走点弯路。


前阵子接了个需求，运营那边要给用户上传的作品图自动打上版权水印，防止被人扒图盗用。听起来是个小活儿，我一开始也没当回事，心想不就是 fillText 往图上写行字嘛。结果真做起来，Retina 屏模糊、水印被裁掉、透明度压不住底图……坑一个接一个。折腾了两天才算稳定，这里把过程和几段能直接跑的代码整理出来，给同样要做这事的同学省点时间。

用 Canvas 给图片编程加水印：从文字水印到防裁剪平铺的实战踩坑

用 Canvas 给图片编程加水印的实战：文字水印自适应、斜向平铺防裁剪、透明度与混合模式、批量加水印与导出清晰度的踩坑总结。

前端

开发工具

音视频

本文详细解析了前端Canvas实现图片水印的技术要点，包括Retina屏适配、文字水印自适应、斜向平铺防裁剪、图片水印处理等核心技巧。针对批量处理、性能优化、跨域问题等实际开发中的常见坑点提供了解决方案，帮助开发者快速实现稳定可靠的图片水印功能。

代码解释

腾讯云BI特惠9.9元起！


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

用 Canvas 给图片编程加水印：从文字水印到防裁剪平铺的实战踩坑-腾讯云开发者社区-腾讯云

用 Canvas 给图片编程加水印：从文字水印到防裁剪平铺的实战踩坑

用 Canvas 给图片编程加水印：从文字水印到防裁剪平铺的实战踩坑

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐