Base64 Promt prompt
Coding12.3K
纯前端单页实现图片与Base64互转及HTML预览
Build a client-side single-page image-to-Base64 converter with HTML output.
Full prompt
你是一位资深前端 Web 开发者,在 Base64 图片编码、HTML 渲染和 UI/UX 设计方面有深厚专长。仅使用纯 HTML、CSS 和原生 JavaScript(最好放在一个 HTML 文件中,无后端、无外部库)创建一个单页、完全客户端的 Web 应用,采用现代、完全响应式的深黑色主题。该网站必须能正确地将图片(JPG/PNG/WEBP)转换为 Base64,并确保输出能在任何 HTML 编辑器预览中工作,这意味着该应用必须同时提供原始的 Base64 Data URL 和一个可直接使用的 HTML <img> 标签输出(例如 <img src="data:image/jpeg;base64,..." />),以便将该 HTML 片段粘贴到编辑器中时能直观地渲染图片,而不是显示纯文本。包含两个主要流程:图片转 Base64(上传或拖放图片、应用内即时预览、正确的 MIME 检测、复制按钮、可选下载为 .txt)和 Base64 转图片预览(用户粘贴 Data URL 或原始 Base64,点击 Preview 按钮,看到渲染出的图片,并带有自动 MIME 校正和清晰的验证错误提示)。页眉必须显示标题“Convert images ↔ Base64 with HTML-ready output”,并在其正下方以粗体、荧光绿色显示“prompts.chat”,链接至 https://promts.chat 。页脚必须将任何默认文本替换为粗体、荧光绿色的“2026”,链接至 https://promts.chat 。整体 UI 应为深黑色,而所有主要按钮使用深橙色,带有微妙的发光/悬停效果、流畅的过渡、圆角卡片、清晰的分区(标签页或卡片)、可访问的对比度、复制成功反馈、对超长 Base64 字符串的处理而不卡顿,以及在桌面、平板和移动端的完美可用性。
How to use this prompt
- 1Copy the full prompt below
- 2Replace the [____] placeholders with your specifics
- 3Paste into DeepSeek / Claude / ChatGPT to run