OnlineFreeTools.org
  • 首页
  • 图片编辑工具
    • 图片文字水印 — 浏览器内本地标注
    • 图片主色提取 — 色板与点击取色
    • 图片翻转 — 水平或垂直镜像
    • 图片加边框 — 选颜色与宽度
    • 图片压缩 — 缩小尺寸与文件体积,本地完成
    • 图片裁剪与改尺寸 — 本地完成
    • 图片 EXIF 查看与清除 — GPS、相机信息、本地处理
    • 图片格式转换 — PNG JPEG WebP AVIF BMP GIF ICO SVG 本地完成
    • 图片转灰度 — 本地黑白转换
    • 多图拼接 — 合成一张拼图,本地完成
    • 图片优化 — 更小体积,可调编码器,本地完成
    • 图片叠加 Logo — 透明定位,本地完成
    • 图片与 Base64 互转 — 本地编码解码
    • 多图转 GIF — 本地合成短动画
    • 多图转 PDF — 每图一页本地合并
    • 多图转 PPT — 每图一张幻灯片
    • 多图转 Word — 本地生成 DOCX
  • 设计工具
    • 品牌色 Token 包 — HEX/HSL/OKLCH 色阶
    • WCAG 对比度检测 — AA/AAA 比率在线算
  • 开发者工具
    • 给域名添加 www DNS — 记录生成与各平台教程
    • CSV ↔ JSON 互转 — 类型、分隔符、本地处理
    • HTML 实体编解码 — 转义、反转义、本地处理
    • IndexNow — Bing URL 提交、密钥检查与状态码
    • IP 地址查询 — 查看我的公网 IP(IPv4/IPv6)
    • JSON Schema 校验器 — 路径错误与本地处理
    • Markdown ↔ HTML 转换 — 预览与安全清理
    • 在线文本对比 — 文本差异对比工具
    • 在线查看 HTTP 响应头
    • YAML ↔ JSON 互转 — 类型规则、多文档、本地处理
  • 计算器
    • BMI 计算器 — 如何计算身体质量指数
    • 多元函数梯度计算 — ∇f 偏导向量
    • 边际收益计算 — 公式 MR = ΔTR / ΔQ
    • 百分比变化计算 — 旧值到新值的涨跌幅
    • 投资回报率(ROI)计算 — 公式与示例
    • 平方英尺转平方米 — 看房与装修面积换算
  • English
  • 中文
  • Español
  • العربية
  • Português
  • Bahasa Indonesia
  • Français
  • 日本語
  • Русский
  • Deutsch

工具

图片文字水印 — 浏览器内本地标注给域名添加 www DNS — 记录生成与各平台教程品牌色 Token 包 — HEX/HSL/OKLCH 色阶图片主色提取 — 色板与点击取色CSV ↔ JSON 互转 — 类型、分隔符、本地处理图片翻转 — 水平或垂直镜像BMI 计算器 — 如何计算身体质量指数多元函数梯度计算 — ∇f 偏导向量边际收益计算 — 公式 MR = ΔTR / ΔQ百分比变化计算 — 旧值到新值的涨跌幅投资回报率(ROI)计算 — 公式与示例HTML 实体编解码 — 转义、反转义、本地处理图片加边框 — 选颜色与宽度图片压缩 — 缩小尺寸与文件体积,本地完成图片裁剪与改尺寸 — 本地完成图片 EXIF 查看与清除 — GPS、相机信息、本地处理图片格式转换 — PNG JPEG WebP AVIF BMP GIF ICO SVG 本地完成图片转灰度 — 本地黑白转换多图拼接 — 合成一张拼图,本地完成图片优化 — 更小体积,可调编码器,本地完成图片叠加 Logo — 透明定位,本地完成图片与 Base64 互转 — 本地编码解码多图转 GIF — 本地合成短动画多图转 PDF — 每图一页本地合并多图转 PPT — 每图一张幻灯片多图转 Word — 本地生成 DOCXIndexNow — Bing URL 提交、密钥检查与状态码IP 地址查询 — 查看我的公网 IP(IPv4/IPv6)JSON Schema 校验器 — 路径错误与本地处理Markdown ↔ HTML 转换 — 预览与安全清理平方英尺转平方米 — 看房与装修面积换算在线文本对比 — 文本差异对比工具WCAG 对比度检测 — AA/AAA 比率在线算在线查看 HTTP 响应头YAML ↔ JSON 互转 — 类型规则、多文档、本地处理

图片叠加 Logo — 透明定位,本地完成

80%
快捷定位
0.90

在底图上叠加 Logo 或透明 PNG 水印图,不是文字水印,也不是多图拼图。步骤:选底图与叠图、调透明度与缩放、拖拽或输入坐标定位、选混合模式,叠加后下载 JPEG/WebP/PNG。示例:示例照片 + 右下角 75% 透明 LOGO → PNG,全程本地、不上传。

怎么用

上传底图与第二层图片(Logo、角标或透明 PNG)。调节透明度、缩放与位置——可在预览上拖拽,也可输入相对底图像素的 x/y。选择混合模式、输出格式与 JPEG 底色后点叠加并下载。全程本地处理,不上传。

绘制规则

输出画布尺寸等于底图像素尺寸。叠图按缩放后的宽高,以左上角锚点 (x, y) 绘制;混合与透明度仅作用于叠层绘制阶段。

  • 画布宽×高 = 底图自然宽×高;底图从 (0, 0) 铺满画布。
  • 叠图绘制尺寸 = 叠图自然宽×高 × (缩放% ÷ 100);位置以左上角为锚点,单位为底图像素。
  • globalAlpha = 透明度 ÷ 100;globalCompositeOperation = 所选混合模式;绘制后两者恢复默认。
  • 导出 JPEG 时先用所选底色铺满画布再绘制,透明区域变实色;PNG/WebP 保留底图与叠图自带的透明。

示例

加载示例:渐变底图 + 右下角 75% 透明 LOGO,混合选正常。点叠加、保持 PNG 并下载。可在预览上拖拽微调位置;也可在浅色 Logo 上试正片叠底。

适合场景

  • 品牌标识:在产品图或社媒头图上叠 Logo,无需打开桌面软件。
  • 角标贴纸:用九宫格快速把「新品」或评分角标放到角落并调透明度。
  • 纹理混合:用灰度叠图配合正片叠底或滤色,给背景照片加色调或柔化。

常见问题

图片会上传吗?

不会。解码、合成与导出都在浏览器完成,可在网络面板确认无 POST。

和「多图拼接」有什么区别?

拼接是把多张照片排成横排/竖排/网格合成一张;叠加是在一张底图上再画一层,可调透明度、位置与混合。

混合模式各是什么意思?

遵循 Canvas 合成规则:正常直接叠上;正片叠底变暗;滤色变亮;叠加增强对比;变暗/变亮取通道最小/最大。预览会实时更新。

为什么要设 JPEG 底色?

JPEG 不支持透明。导出前会用所选颜色铺满画布,避免透明 PNG 区域变成黑块。

能在这里打字加水印吗?

本页只叠加图片文件。文字水印请使用「文字水印」工具。

相关工具

  • 多图拼接 — 合成一张拼图,本地完成
  • 图片文字水印 — 浏览器内本地标注
  • 图片裁剪与改尺寸 — 本地完成

分享这个工具

可通过社交网络分享,或复制本页链接;支持系统分享的设备也可一键分享。

XFacebookLinkedInRedditWhatsAppTelegram

https://onlinefreetools.org/zh/tools/image-overlay

咨询与反馈

页面不清、功能异常或想提建议?在下方起草邮件,我们会阅读每一封关于工具的来信。

邮箱: dailyonetools@outlook.com

参考来源

  • MDN — globalCompositeOperation
  • MDN — globalAlpha
  • MDN — CanvasRenderingContext2D.drawImage()
OnlineFreeTools.org · 学习项目 · 持续迭代
关于·开发日志·隐私·条款·联系