图片加文字工具

工具功能

这是一款完全在线运行的图片添加文字工具，无需上传图片到服务器，所有操作都在你的浏览器本地完成，可以给任意图片添加多个文字水印或说明文字，支持自定义位置、样式，支持拖拽调整位置，最后导出为 PNG 或 JPEG 图片。

使用方法

1. 点击「选择背景图片」上传你要处理的图片。
2. 填写你要添加的文字内容，设置字号、文字颜色、透明度、字体、描边等样式。
3. 点击「添加文字」把文字添加到图片上。
4. 在画布上按住鼠标拖动文字，可以调整文字到你想要的位置。
5. 重复步骤 2-4，可以添加多个不同样式的文字。
6. 点击「导出 PNG」或「导出 JPEG」下载处理好的图片。

实现原理

工具使用 HTML5 Canvas API 实现：

1. 先将用户上传的背景图片绘制到 Canvas 画布上。
2. 每个添加的文字作为独立的「文字图层」保存，保存每个文字的内容、样式和位置信息。
3. 每次修改后清空画布，重新绘制背景图和所有文字图层，实现实时预览。
4. 通过监听 Canvas 的鼠标事件，实现文字拖拽移动，拖动时实时更新位置并重绘。
5. 导出时调用 Canvas 的 toBlob 方法，生成对应格式的图片文件供用户下载。

注意事项

• 所有处理都在浏览器本地完成，图片不会上传到任何服务器，隐私有保障。
• 如果图片很大，画布会自动显示滚动条，不影响编辑和导出，导出图片尺寸和你上传的原图一致。
• 字体效果会受你本地系统字体影响，选择通用字体兼容性更好。
• 导出 JPEG 不支持透明背景，如果需要保留透明背景请选择导出 PNG。