html5怎么给图片加文字水印_html5文字水印教程【代码】

用canvas绘制文字水印最可靠，需图片onload后drawImage，设置textBaseline和textAlign居中对齐，globalAlpha控透明度，toDataURL导出时注意跨域、MIME类型及质量参数，斜向平铺需save/restore+translate+rotate，前端水印仅防误用，防窃取须服务端生成。

用 canvas 绘制文字水印是最可靠的方式

html5 本身没有“给图片加水印”的原生属性， 标签不支持叠加渲染文字。必须借助 canvas：先加载图片，再在画布上用 fillText() 绘制文字。这种方式能精确控制位置、透明度、旋转角度，且水印真正“融合”进图像像素——导出后不可剥离。

常见错误是直接用 css 叠加 div 或伪元素，那只是视觉层遮罩，截图或另存图片时水印根本不会保存。

• 必须等图片 onload 完成后再调用 drawImage()，否则画布为空
• 文字坐标默认以左下角为基准（Canvas 的文本基线是 alphabetic），建议设 ctx.textBaseline = 'middle' + ctx.textAlign = 'center' 避免偏移
• 使用 ctx.globalAlpha = 0.3 控制水印透明度，别用 CSS opacity，它会影响整块 canvas 渲染

toDataURL() 导出带水印的图片要留意 MIME 类型

调用 canvas.toDataURL('image/png') 或 canvas.toDataURL('image/jpeg', 0.9) 才能得到含水印的 Base64 图片数据。若省略参数，默认是 image/png，但某些场景（如微信分享）要求 JPEG；此时必须显式传入类型和质量值，否则导出可能失真或体积过大。

注意：toDataURL() 在跨域图片上会触发 SecurityError。如果图片来自其他域名，需确保服务端返回 access-Control-Allow-Origin: *，并在 img 上加 crossOrigin="anonymous" 属性。

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

• 导出 PNG 无损但体积大；JPEG 有损但适合网页展示
• 质量参数仅对 JPEG 生效，取值 0–1，推荐 0.8–0.9 平衡清晰度与大小
• 移动端 Safari 对大尺寸 canvas（如 > 4096px）可能截断，需提前缩放图片

文字水印倾斜防覆盖的关键参数

平铺式斜向水印（比如 20° 旋转、半透明、重复填充）最实用。核心是用 ctx.rotate() 配合循环绘制，而不是只画一次。旋转前必须用 ctx.save() / ctx.restore() 保护状态，否则后续绘图全歪。

示例关键片段：

ctx.save(); ctx.translate(x, y); ctx.rotate(Math.PI / 9); // 20度 ctx.fillStyle = 'rgba(255, 255, 255, 0.15)'; ctx.font = 'bold 18px sans-serif'; ctx.fillText('CONFIDENTIAL', 0, 0); ctx.restore();

• 旋转中心点用 translate() 移到目标位置，再旋转，避免绕左上角转导致错位
• 字体大小建议 ≥16px，太小在高分屏上模糊不可读
• 颜色推荐 rgba(0,0,0,0.1)（黑字浅灰）或 rgba(255,255,255,0.15)（白字浅白），兼顾可读性与不干扰原图

服务端生成更稳妥，但前端方案要防绕过

纯前端水印本质是“障眼法”：用户禁用 js、直接右键另存原始 、或抓包下载源图，水印就失效。真要防泄漏，必须由服务端动态加水印（如用 node.js 的 sharp 或 python 的 pillow）。

前端方案只适合增强体验、提示版权归属。若业务强依赖水印防窃取，别把逻辑全放在客户端——哪怕加了 canvas 水印，原始 URL 还在 dom 里明摆着。

容易被忽略的一点：水印文字内容若含变量（如用户 ID），务必在服务端注入并签名，否则前端拼接的文字可被随意篡改。