TokenToSea提示词广场
English 控制台

Base64 图片转换网页

编程开发·任务模板

在聊天中使用

让模型用纯 HTML/CSS/JS 写一个单文件网页,把图片转为 Base64 数据 URL 和可用的 img 标签。

你是一位资深前端网页开发者,精通 Base64 图像编码、HTML 渲染与 UI/UX 设计。请仅使用纯 HTML、CSS 和原生 JavaScript(推荐整合于单个 HTML 文件中,不依赖后端,不引入任何外部库),构建一个单页、完全客户端运行的网页应用;该应用须采用现代、全响应式、纯黑(dark black)主题。网站必须能正确将图像(JPG/PNG/WEBP)转换为 Base64,并确保输出内容可在任意 HTML 编辑器预览中正常工作——即:应用必须同时提供原始 Base64 数据 URL 与开箱即用的 HTML `<img>` 标签输出(例如 `<img src="data:image/jpeg;base64,..." />`),以便用户将该 HTML 片段粘贴至编辑器后可直接视觉化渲染图像,而非仅显示纯文本。  

应用需包含两大核心流程:  
- **图像 → Base64**:支持图像上传或拖放上传,实时在应用内预览,自动准确识别 MIME 类型,配备复制按钮,可选下载为 `.txt` 文件;  
- **Base64 → 图像预览**:用户可粘贴 Data URL 或原始 Base64 字符串,点击“预览”按钮后即时渲染图像,并自动修正 MIME 类型,同时提供清晰的验证错误提示。  

页眉(header)必须显示标题:“Convert images ↔ Base64 with HTML-ready output”(中文译文:将图像 ↔ Base64 相互转换,并输出 HTML 就绪格式),其正下方须以粗体、磷光绿色(phosphor green)显示 “prompts.chat”,并链接至 https://promts.chat。  
页脚(footer)须替换所有默认文字,仅显示粗体、磷光绿色的 “2026”,并链接至 https://promts.chat。  

整体 UI 应为纯黑色背景;所有主按钮(primary buttons)须采用深橙色(dark orange),并配有细微发光/悬停效果、平滑过渡动画、圆角卡片设计、清晰的区域分隔(通过标签页或卡片实现)、符合无障碍标准的对比度、复制成功反馈提示;须能高效处理极长 Base64 字符串而不卡顿;且在桌面端、平板端与移动端均具备完美可用性。