原图
选择图片后将在这里显示预览。
图片 / 本地工具
图片转 Data URL 工具
在本地把图片转换为不含元数据的 PNG Data URL，预览并复制到 HTML 或 CSS。
处理结果
选择图片后将在这里显示预览。
使用说明如何使用 图片转 Data URL 工具 ⌄
实际处理方法
在本地把图片转换为不含元数据的 PNG Data URL，预览并复制到 HTML 或 CSS。
可复现示例
示例输入示例文件：product-photo.png（1600 × 1200）
操作 = 图片转 Data URL 工具；输出 = data-url.png浏览器按“在本地把图片转换为不含元数据的 PNG Data URL，预览并复制到 HTML 或 CSS。”重新计算像素，预览确认后下载 data-url.png；原图不被覆盖。
- 1
选择 product-photo.png，并先核对原图尺寸与格式；支持 JPEG、PNG、WebP；最大 30 MB、4000 万像素。
- 2
使用本工具的实际参数（操作 = 图片转 Data URL 工具；输出 = data-url.png）。处理器只执行“在本地把图片转换为不含元数据的 PNG Data URL，预览并复制到 HTML 或 CSS。”，不会套用其他滤镜。
- 3
对照原图与处理结果，重点检查目标区域、透明边缘和过渡细节，再下载 data-url.png。
Data URL 使用指南
把图片转换为可复制的 PNG Data URL
选择 JPEG、PNG 或 WebP 后，工具会在浏览器 Canvas 中重新渲染图片，并生成以 data:image/png;base64, 开头的 PNG Data URL。图片和结果不会上传到 321Kit。
HTML 与 CSS 用法
在 HTML 中可把完整结果放进 img 的 src；在 CSS 中可放进 background-image: url("…")。Data URL 会把图片数据直接写进文本，不会创建公开托管地址。
输出为什么总是 PNG
工具先把支持的源图片绘制到 Canvas，再使用 PNG 编码生成 Data URL。因此 JPEG 与 WebP 输入也会得到 PNG MIME 类型，原文件名、压缩方式和可移除元数据不会被保留。
什么时候不该使用 Data URL
Base64 会增加文本体积，而且内联资源不能像独立图片 URL 那样单独缓存。小图标或自包含示例较合适；大图和重复使用的资源通常应继续使用正常文件 URL。
常见问题
这是可以分享的图片网址吗？
不是。它是包含图片字节的内联 Data URL，不会把图片上传到互联网，也不会生成第三方可访问的托管页面。
支持哪些输入格式？
支持 JPEG、PNG 和 WebP，单文件最大 30 MB、4000 万像素。输出统一为 PNG Data URL。
转换会保留原图元数据吗？
不会。图片被重新绘制并编码为新的 PNG 结果；原文件中的 EXIF 等元数据不会被复制到生成结果。
匿名反馈
这个工具解决问题了吗？
工具有问题，或有更好的优化建议？请告诉我们。每条反馈都会查看，我们会在收到后的 2 天内开始处理可执行的优化，并持续提升工具的可靠性与使用体验。