在浏览器编辑 PNG：完整操作教程

这篇教程将完成什么

本教程用一张本地 PNG 走完浏览器修图流程：在 PhotoCraft 打开，画一笔明显标记，导出 PNG，再到编辑器外检查。还会保存一份 PSD，避免最终成图成为唯一副本。样例是合成的 320 × 320 图片，运行环境为本站固定 v0.12.0 WebAssembly 版本，不需要账号或图片上传服务。

目标是完成可靠的小编辑，不是证明所有图片工作流都适用。先用样例再处理重要文档。外围网站可选中文或葡语，原编辑器仍为英文；下面的菜单都指画布内应用菜单，不是浏览器 File 菜单。本站加载 GA4 和自托管 Plausible 统计访问，这些服务不会收到编辑步骤中的图片内容或本地文件名。

准备文件与工作区

把样例 PNG下载到新目录，保留原件并单独设置输出目录。样例不含个人资料。换成自己的图片时，请使用有权编辑的副本。先不使用超大文件，小样例有助于区分启动故障与文档问题。

在较宽屏幕打开首页编辑器，等待应用菜单与画布出现。网页标题显示不代表 WebAssembly 已启动。如果工作区一直空白，先查看渲染故障排查，不要重复导入来碰运气。

将 PNG 导入编辑器

把文件拖到应用画布内，不要放在外围文章或浏览器工具栏。也可从应用 File 菜单选择本地文件。确认图片成为当前文档；如果浏览器直接另开图片页面，请返回编辑器并改用应用菜单。

使用快捷键前点击工作区。浏览器和编辑器焦点是两回事。小屏幕上的面板可能挤压画布，可尝试外围面板切换或使用更宽屏幕。窄屏测试通过并不表示每台设备触控都顺手；原画布主要围绕桌面式操作设计。

做出容易核对的修改

选择画笔，在图片中间画一段短且明显的笔画，颜色与背景形成对比。第一次练习不要在边缘画极小、低透明度标记，重点是能在画布及下载图片中明确认出变化。

没有笔画时，检查当前文档、工具及指针是否在画布上。画错可从 Edit 撤销后重试。光标变化不代表像素发生变化，自动测试因此会检查真正导出的像素，而不只确认控件存在。

导出 PNG 并检查下载文件

使用编辑器 File 菜单中的 PNG 导出命令，等浏览器下载完成后找到真实文件。浏览器的提示和下载目录设置可能不同，同名文件也可能自动加序号。检查时间并打开正确输出，不要仅凭显示名称判断。

用其他图片查看器打开导出图，确认标记和 320 × 320 尺寸。画布截图包含界面缩放、面板与网页元素，不等于导出图片本身。可以查看样例编辑后输出，但手绘笔画自然不会与自动测试完全相同。

再保存一份可编辑文件

PNG 是渲染后的图像，不承诺保存完整编辑结构。使用 Save As，以另一个明确文件名下载 PSD，并把输入 PNG、工作 PSD 与交付 PNG 放在一起，分别标明原件、工作版本和最终成图。

依赖 PSD 前先在 PhotoCraft 重开，再导出 PNG，与自己的编辑后图像比较。公开测试记录覆盖这一简单流程。涉及复杂图层、字体或 Photoshop 交付时，先读PSD 支持指南；扩展名正确只是兼容性检查的起点。

常见问题与排查步骤

现象	先检查	安全的下一步
浏览器把 PNG 当作网页打开	拖放位置	使用编辑器 File 菜单
快捷键保存了网页	焦点是否在画布	取消对话框，改用应用菜单
导出图像看起来没变	当前文档与下载文件名	做明显修改并以新名字导出
目标目录里没有文件	浏览器提示和下载记录	找到已完成下载再继续
工作区空白	启动或图形错误	可保存时先保存，再按指南排查

遇到问题先不要刷新。此版本没有自动保存或崩溃恢复。画布还能响应时，应先保存再切换渲染器、重载或离开；已经无响应时，先保留下载文件，本站没有服务器副本可恢复未保存文档。

完成可复核的文件交付

完成后的目录应包含原件、编辑 PNG 和核对过的 PSD。再打开最终 PNG，确认修改、尺寸和名称。仅分享接收方需要的文件，并说明哪个是外观参考、哪个可供继续编辑；确认交付成功前保留自己的副本。

验收标准是：原件不变，导出像素确实改变，保存的工作文件可以重开。长会话可继续使用保存与备份流程，更广泛的能力限制见浏览器版评测。