香蕉切割者 Bananacutter
基于 Canvas 的纯前端图片切割工具，支持拖拽上传、自定义行列与边距、实时网格预览。
2026-04-25 · UI · 工具 · Canvas
PROMPT
Prompt（点击展开） 展开
请用纯前端 HTML/CSS/JS 实现一个图片切割工具： 1. 用户拖拽或点击上传一张图片 2. 在画布上覆盖可配置的网格（行列数 / 边距可调） 3. 实时预览切割结果 4. 点击导出可下载所有切片为 zip 要求：单个 HTML 文件，不依赖任何 CDN，所有依赖打包内联。
OUTPUT
claude-4.7.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>香蕉切割者 — Claude 4.7</title>
<style>
body {
margin: 0;
min-height: 100vh;
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
background-color: #ebe5d8;
background-image: repeating-linear-gradient(45deg, transparent 0, transparent 18px, rgba(0,0,0,0.025) 18px, rgba(0,0,0,0.025) 36px);
color: #6b6661;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.placeholder {
max-width: 420px;
padding: 2.5rem 3rem;
background: rgba(244, 240, 230, 0.7);
border: 1.5px dashed #c5b9a4;
border-radius: 12px;
text-align: center;
}
.icon {
width: 72px;
height: 72px;
margin: 0 auto 1.25rem;
color: #c5b9a4;
}
.icon svg { width: 100%; height: 100%; }
.badge {
display: inline-block;
padding: 0.3rem 0.85rem;
border-radius: 999px;
background: #cc785c;
color: #fff;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
margin-bottom: 0.75rem;
}
h1 {
font-family: ui-serif, 'Iowan Old Style', Georgia, serif;
font-weight: 500;
font-size: 1.375rem;
letter-spacing: -0.01em;
margin: 0 0 0.5rem;
color: #4a443d;
}
p {
font-size: 0.8125rem;
line-height: 1.5;
color: #918879;
margin: 0;
}
</style>
</head>
<body>
<main class="placeholder">
<div class="icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2"/>
<circle cx="9" cy="9" r="2"/>
<path d="m21 15-4.5-4.5L5 21"/>
</svg>
</div>
<span class="badge">CLAUDE 4.7</span>
<h1>占位图</h1>
<p>替换为 Claude 4.7 真实生成的 HTML</p>
</main>
</body>
</html>
gpt-5.5.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>香蕉切割者 — GPT-5.5</title>
<style>
body {
margin: 0;
min-height: 100vh;
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
background-color: #ebe5d8;
background-image: repeating-linear-gradient(45deg, transparent 0, transparent 18px, rgba(0,0,0,0.025) 18px, rgba(0,0,0,0.025) 36px);
color: #6b6661;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.placeholder {
max-width: 420px;
padding: 2.5rem 3rem;
background: rgba(244, 240, 230, 0.7);
border: 1.5px dashed #c5b9a4;
border-radius: 12px;
text-align: center;
}
.icon {
width: 72px;
height: 72px;
margin: 0 auto 1.25rem;
color: #c5b9a4;
}
.icon svg { width: 100%; height: 100%; }
.badge {
display: inline-block;
padding: 0.3rem 0.85rem;
border-radius: 999px;
background: #10a37f;
color: #fff;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
margin-bottom: 0.75rem;
}
h1 {
font-family: ui-serif, 'Iowan Old Style', Georgia, serif;
font-weight: 500;
font-size: 1.375rem;
letter-spacing: -0.01em;
margin: 0 0 0.5rem;
color: #4a443d;
}
p {
font-size: 0.8125rem;
line-height: 1.5;
color: #918879;
margin: 0;
}
</style>
</head>
<body>
<main class="placeholder">
<div class="icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2"/>
<circle cx="9" cy="9" r="2"/>
<path d="m21 15-4.5-4.5L5 21"/>
</svg>
</div>
<span class="badge">GPT-5.5</span>
<h1>占位图</h1>
<p>替换为 GPT-5.5 真实生成的 HTML</p>
</main>
</body>
</html>
gemini-3.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>香蕉切割者 — Gemini 3 Pro</title>
<style>
body {
margin: 0;
min-height: 100vh;
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
background-color: #ebe5d8;
background-image: repeating-linear-gradient(45deg, transparent 0, transparent 18px, rgba(0,0,0,0.025) 18px, rgba(0,0,0,0.025) 36px);
color: #6b6661;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.placeholder {
max-width: 420px;
padding: 2.5rem 3rem;
background: rgba(244, 240, 230, 0.7);
border: 1.5px dashed #c5b9a4;
border-radius: 12px;
text-align: center;
}
.icon {
width: 72px;
height: 72px;
margin: 0 auto 1.25rem;
color: #c5b9a4;
}
.icon svg { width: 100%; height: 100%; }
.badge {
display: inline-block;
padding: 0.3rem 0.85rem;
border-radius: 999px;
background: #4285f4;
color: #fff;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
margin-bottom: 0.75rem;
}
h1 {
font-family: ui-serif, 'Iowan Old Style', Georgia, serif;
font-weight: 500;
font-size: 1.375rem;
letter-spacing: -0.01em;
margin: 0 0 0.5rem;
color: #4a443d;
}
p {
font-size: 0.8125rem;
line-height: 1.5;
color: #918879;
margin: 0;
}
</style>
</head>
<body>
<main class="placeholder">
<div class="icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2"/>
<circle cx="9" cy="9" r="2"/>
<path d="m21 15-4.5-4.5L5 21"/>
</svg>
</div>
<span class="badge">GEMINI 3 PRO</span>
<h1>占位图</h1>
<p>替换为 Gemini 3 Pro 真实生成的 HTML</p>
</main>
</body>
</html>