添加水印转图片

使用方法

添加水印转图片是「传图、写字、调样式、导出」四步：

1. 「选择图片」挑一张本地图；不传也有示例图可先试。
2. 「水印文字」填要叠的字，演示值 柳泉工具 · 示例水印。
3. 「位置」选右下角、居中或平铺；「透明度」「字号」「颜色」按喜好调，演示透明度 45、字号 28、白色。
4. 点「生成水印」看预览，满意点「导出 PNG」下载；想换回演示按「载入示例」。

添加水印转图片能解决什么

它解决「不想装 PS、只想快速盖个标」的需求，适合三类场景：

• 版权署名：照片右下角盖半透明白字，既表明归属又不挡主体，演示透明度 45 在浅底深底上都可读。
• 截图标注：给教程截图加「内部资料」「草稿」字样，平铺模式能铺满整图防截走冒用。
• 批量风格统一：同一套字号与颜色反复用在系列图上，保证品牌视觉一致；导出的 PNG 可直接进下一道图片压缩流程。

本页不做的事：不加图片水印（只加文字）；不做旋转、裁剪、压缩（那些是别的工具）；不保证水印「去不掉」——它只是视觉叠加，别人仍可能裁掉或修掉。需要更强保护请加水印同时降分辨率或加盲水印。

原理和变量

① 用了哪个具体函数：绘制用 Canvas 2D 的 ctx.drawImage 贴原图，再 ctx.fillText 写水印；透明度用 ctx.globalAlpha = 透明度÷100；测量宽度用 ctx.measureText 定位右下角。导出用 canvas.toBlob 生成 PNG。

② 关键参数为什么这样取：透明度除以 100 是因为 HTML 的 globalAlpha 是 0～1 的小数，45 表示 45% 不透明；右下角用 宽 − 文字宽 − 16 留 16 像素边距，避免贴边被裁。字号直接取像素，和导出图分辨率一致，放大原图时水印也随之清晰。

③ 遵循哪个标准：Canvas 2D 与 PNG 导出遵循 W3C Canvas 规范与 RFC 2083（PNG）；文字渲染用系统字体，跨浏览器一致。所有像素操作在本地，不依赖服务器编解码。

④ 输入怎么变成输出：原图先等比缩到最大边 900 像素（演示示例图是 480×300 的纯色板），再在其上用 globalAlpha=0.45 写 28px 白字；右下角坐标 = (480 − 文字宽 − 16, 300 − 16)，预览即所见即所得。

⑤ 边界与阈值：透明度限 0～100（0 全透明等于没加，100 实色盖死）；字号 8～120；颜色任意十六进制；原图过大时先缩到 900 边再画，避免移动端内存爆掉。非图片文件会被拦下提示。

⑥ 常见误用的正确解释：透明度 100 不是「最清楚」而是「完全不透明盖住底下」，想半透就填 30～60；平铺模式文字密集会糊，适合防伪不适合美观；导出 PNG 不会保留原图 EXIF 等信息，属正常丢弃。

完整示例（数值仅作演示）

示例图 480×300，水印 柳泉工具 · 示例水印，右下角、透明度 45、字号 28、白色。

• 原图：纯色示例板 480×300（无上传时占位用）。
• 水印绘制：globalAlpha = 0.45，白字 28px，右下边距 16 像素。
• 预览：右下角出现半透明署名，主体区基本不被遮挡。
• 导出：点「导出 PNG」得到一张 480×300 的带水印 PNG。

上传真实图片后，以上参数原样套用，仅画布尺寸随原图变化。

输入范围与对照表

添加水印转图片的对照表给出常见场景的位置与透明度建议，方便你直接套：

对照表是经验值，最终以预览为准；透明度过低的字在深底上可能看不清，建议先在示例图试。

结果边界和舍入

舍入位置：字号与透明度都是整数输入，直接用于绘制，无小数舍入；画布尺寸按「最大边 900」等比缩放，可能得到非整数像素，浏览器会自动抗锯齿。

什么时候会提示：选了非图片文件会提示「请选择图片文件」；透明度/字号超出范围会夹回上下限再画；文字为空则只出原图不出字。

导出性质：导出的是位图 PNG，放大不清晰；不保留原图 EXIF、图层与矢量信息。若要再压缩体积，请用图片压缩工具接力。

隐私：原图通过 FileReader 读进内存，全程不发起网络请求，关闭页面即释放。

常见问题

相关工具

• 图片压缩工具：水印 PNG 导出后再压体积。
• PNG 转 JPG：需要无透明背景时转格式。
• JPG 转 PNG：先转透明底再加水印。
• 图片裁剪：加水印前先裁掉多余边。
• 翻转图片在线：方向不对先翻转。
• 旋转图片在线：斜了先转正再加水印。
• 图片尺寸调整：统一多张图尺寸后批量署名。