首页 › 前端工具 › 图片叠加
IO

图片叠加

使用Canvas API实现图片叠加合成,支持文字水印和图片水印

核心技术Canvas API
叠加类型文字 / 图片水印
位置控制9 宫格定位
处理方式浏览器本地合成
选择底图 叠加水印或文字的基础图片
BASE
点击选择或拖拽底图到此处
所有处理在浏览器本地完成

图片叠加说明

本工具使用 HTML5 Canvas API 在浏览器本地实现图片叠加合成,支持在底图上叠加文字或另一张图片(水印)。

原理:将底图绘制到 Canvas 上,再通过 ctx.globalAlpha 控制透明度,ctx.translate / rotate 控制旋转,在指定位置绘制叠加内容。

文字叠加:可自定义文字内容、字体、字号、颜色,适用于添加标注、签名、版权信息等。

图片叠加:上传水印图片并设置缩放比例,适用于添加 Logo 水印、品牌标识等。

9 宫格定位:将图片划分为 3×3 九宫格,快速选择叠加内容的放置位置(左上、上中、右上、左中、居中、右中、左下、下中、右下)。

透明度:控制叠加内容的透明程度,0% 完全透明,100% 完全不透明。水印通常建议 30%-60%。

旋转角度:支持 -180° 到 180° 旋转,可用于创建斜向水印效果。旋转以叠加内容中心为轴。

用途:图片水印、Logo 叠加、版权标注、批量加签、社交媒体图片制作等。

前端工具