2 lines
13 KiB
HTML
2 lines
13 KiB
HTML
<!DOCTYPE html><html lang="zh-CN"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/css/index.B96d0yxr.css" data-rsc-css-href="/_next/static/css/index.B96d0yxr.css" data-precedence="vite-rsc/importer-resources"/><link rel="modulepreload" fetchPriority="low" href="/_next/static/chunks/index-DJm5cxJ6.js"/><script src="/_next/static/chunks/rolldown-runtime-C60lm6uB.js" type="module" async=""></script><script src="/_next/static/chunks/framework-BgSIrAUN.js" type="module" async=""></script><link rel="modulepreload" href="/_next/static/chunks/layout-segment-context-a2puOOKn.js" crossorigin=""/><link rel="modulepreload" href="/_next/static/chunks/page-OnKjbyiO.js" crossorigin=""/><title>豆格工坊｜图片转拼豆图纸</title><meta name="description" content="在浏览器中把图片转换为拼豆像素图纸，按色号、名称或像素格筛选颜色。"/><script>Object.assign(((self[Symbol.for("vinext.navigationRuntime")]??={bootstrap:{routeManifest:null},functions:{}}).bootstrap.rsc??={rsc:[]}),{params:{},nav:{"pathname":"/","searchParams":[]}})</script><link rel="modulepreload" href="/_next/static/chunks/index-DJm5cxJ6.js" />
|
||
</head><body><main><header class="topbar"><a class="brand" href="#top" aria-label="豆格工坊首页"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span>豆格工坊</span></a><span class="top-note">图片转拼豆图纸 · 本地处理</span></header><section class="hero" id="top"><div><p class="eyebrow">PIXEL BEAD STUDIO</p><h1>把喜欢的图片，<br/><em>变成一格一格的快乐。</em></h1><p class="hero-copy">上传图片，选择图纸大小和颜色数量；点击任意像素格，就能单独查看该颜色需要摆放的区域。</p></div><div class="hero-badge"><strong>100<!-- --> × <!-- -->100</strong><span>当前图纸格数</span></div></section><section class="workspace" aria-label="拼豆图纸转换工具"><aside class="control-panel"><div class="panel-heading"><span>01</span><div><h2>图片与规格</h2><p>先决定图纸需要多少格</p></div></div><div class="upload-card crop-preview" style="aspect-ratio:100 / 100"><canvas aria-label="转换区域预览，可拖动调整取景"></canvas><span class="crop-frame" aria-hidden="true"></span><button type="button" class="upload-overlay">更换图片</button><input class="file-input" type="file" accept="image/png,image/jpeg,image/webp"/></div><p class="file-name" title="示例：田野小屋">示例：田野小屋</p><label class="field crop-zoom"><span>取景缩放 <b>1.0<!-- -->×</b></span><input type="range" min="1" max="5" step="0.1" value="1"/></label><button class="reset-crop">复位取景</button><div class="field-row"><label><span>横向格数</span><input type="number" min="8" max="256" value="100"/></label><span class="times">×</span><label><span>纵向格数</span><input type="number" min="8" max="256" value="100"/></label></div><label class="field"><span>最多使用颜色 <b>64</b></span><input type="range" min="2" max="64" value="64"/></label><label class="field"><span>取色策略</span><select><option value="smooth" selected="">平滑取色（细节丰富）</option><option value="dominant">区域主色（减少杂色）</option></select></label><label class="field"><span>图片适应方式</span><select><option value="cover" selected="">裁剪铺满</option><option value="contain">完整显示</option></select></label><button class="primary-button">重新转换</button><p class="privacy-note">图片只在当前浏览器中处理，不会上传到服务器。</p></aside><section class="pattern-panel" id="pattern-preview"><div class="pattern-toolbar"><div><p class="section-kicker">02 / 图纸预览</p><h2>点击格子，筛选颜色</h2></div><div class="zoom-control" aria-label="图纸缩放"><button aria-label="缩小">−</button><input aria-label="缩放比例" type="range" min="8" max="42" value="8"/><button aria-label="放大">＋</button><output>8<!-- -->px</output></div></div><div class="canvas-viewport"><div class="canvas-stage"><div class="canvas-wrap"><canvas aria-label="转换后的拼豆像素图，可拖动查看，轻点格子选择颜色"></canvas></div></div></div><div class="pattern-footer"><span class="status-dot"></span> <span>示例图已准备好，可以直接转换</span><div class="view-options"><label><input type="checkbox" checked=""/> 网格</label><label><input type="checkbox" checked=""/> 格内编号</label><button class="save-button">保存历史</button><button>下载 PNG</button></div></div><div class="pattern-legend"><div class="legend-heading"><strong>本图所需颜色与用量</strong><span>按数量从多到少，共 <!-- -->0<!-- --> 色</span></div><div class="legend-list"></div></div></section><aside class="color-panel"><div class="panel-heading"><span>03</span><div><h2>分色查看</h2><p>0<!-- --> 种颜色 · <!-- -->0<!-- --> 颗</p></div></div><div class="search-box"><span>⌕</span><input placeholder="输入 A6、MARD A 或 #FEAC4C" value=""/></div><div class="selection-tools"><label class="switch-row"><input type="checkbox"/><span class="switch"></span><span>只显示选中颜色</span></label></div><div class="color-list"></div><p class="palette-note"><strong>MARD 221 基础色卡</strong>：默认使用 A/B/C/D/E/F/G/H/M 九个系列。屏幕色值仅用于近似匹配，实体豆颜色会受批次、光线和屏幕影响。</p></aside></section><section class="history-section" aria-labelledby="history-title"><div class="history-heading"><div><p class="section-kicker">LOCAL PATTERN ARCHIVE</p><h2 id="history-title">历史图纸</h2><p>历史保存在当前浏览器，最多保留 30 份。</p></div><div class="search-box"><span>⌕</span><input placeholder="按名称或 32x32 查询" value=""/></div></div><div class="history-empty">还没有符合条件的历史图纸。转换完成后点击“保存历史”即可在这里查询。</div></section></main><script type="module" src="/_next/static/chunks/index-DJm5cxJ6.js" id="_R_" async=""></script><script>((self[Symbol.for("vinext.navigationRuntime")]??={bootstrap:{routeManifest:null},functions:{}}).bootstrap.rsc??={rsc:[]}).rsc.push("2:I[\"8c0f216c4604\",[],\"Children\",1]\n")</script><script>((self[Symbol.for("vinext.navigationRuntime")]??={bootstrap:{routeManifest:null},functions:{}}).bootstrap.rsc??={rsc:[]}).rsc.push("3:I[\"593f344dc510\",[],\"GlobalErrorBoundary\",1]\n")</script><script>((self[Symbol.for("vinext.navigationRuntime")]??={bootstrap:{routeManifest:null},functions:{}}).bootstrap.rsc??={rsc:[]}).rsc.push("4:I[\"0b874ad30386\",[],\"default\",1]\n")</script><script>((self[Symbol.for("vinext.navigationRuntime")]??={bootstrap:{routeManifest:null},functions:{}}).bootstrap.rsc??={rsc:[]}).rsc.push("5:I[\"593f344dc510\",[],\"ErrorBoundary\",1]\n")</script><script>((self[Symbol.for("vinext.navigationRuntime")]??={bootstrap:{routeManifest:null},functions:{}}).bootstrap.rsc??={rsc:[]}).rsc.push("6:I[\"15c18cfaeeff\",[],\"LayoutSegmentProvider\",1]\n")</script><script>((self[Symbol.for("vinext.navigationRuntime")]??={bootstrap:{routeManifest:null},functions:{}}).bootstrap.rsc??={rsc:[]}).rsc.push("7:I[\"8c0f216c4604\",[],\"Slot\",1]\n")</script><script>((self[Symbol.for("vinext.navigationRuntime")]??={bootstrap:{routeManifest:null},functions:{}}).bootstrap.rsc??={rsc:[]}).rsc.push("8:I[\"9276801271d6\",[],\"AppRouterScrollTarget\",1]\n")</script><script>((self[Symbol.for("vinext.navigationRuntime")]??={bootstrap:{routeManifest:null},functions:{}}).bootstrap.rsc??={rsc:[]}).rsc.push("9:I[\"593f344dc510\",[],\"RedirectBoundary\",1]\n")</script><script>((self[Symbol.for("vinext.navigationRuntime")]??={bootstrap:{routeManifest:null},functions:{}}).bootstrap.rsc??={rsc:[]}).rsc.push(":HL[\"/_next/static/css/index.B96d0yxr.css\",\"style\" ]\n")</script><script>((self[Symbol.for("vinext.navigationRuntime")]??={bootstrap:{routeManifest:null},functions:{}}).bootstrap.rsc??={rsc:[]}).rsc.push("0:{\"__route\":\"route:/\",\"__interceptionContext\":null,\"__layoutIds\":[\"layout:/\"],\"__rootLayout\":\"/\",\"__sourcePage\":\"/page\",\"page:/\":\"$L1\",\"layout:/\":[[[[\"$\",\"link\",\"css:/_next/static/css/index.B96d0yxr.css\",{\"rel\":\"stylesheet\",\"precedence\":\"vite-rsc/importer-resources\",\"href\":\"/_next/static/css/index.B96d0yxr.css\",\"data-rsc-css-href\":\"/_next/static/css/index.B96d0yxr.css\"}],\"$undefined\"],[\"$\",\"html\",null,{\"lang\":\"zh-CN\",\"children\":[\"$\",\"body\",null,{\"children\":[\"$\",\"$L2\",null,{}]}]}]],null],\"route:/\":[[[\"$\",\"meta\",null,{\"charSet\":\"utf-8\"}],[[\"$\",\"title\",\"0\",{\"children\":\"豆格工坊｜图片转拼豆图纸\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"在浏览器中把图片转换为拼豆像素图纸，按色号、名称或像素格筛选颜色。\"}]],[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]],[\"$\",\"$L3\",null,{\"fallback\":\"$4\",\"children\":[\"$\",\"$L5\",null,{\"fallback\":\"$4\",\"children\":[\"$\",\"$L6\",null,{\"providerId\":\"layout:/\",\"segmentMap\":{\"children\":[]},\"children\":[\"$\",\"$L7\",null,{\"id\":\"layout:/\",\"parallelSlots\":\"$undefined\",\"children\":[\"$\",\"$L8\",null,{\"children\":[\"$\",\"$L9\",null,{\"children\":[[\"$\",\"$L6\",null,{\"providerId\":\"page:/\",\"segmentMap\":{\"children\":[\"__PAGE__\"]},\"children\":[\"$\",\"$L7\",null,{\"id\":\"page:/\"}]}],null]}]}]}]}]}]}],null,null],\"__layoutFlags\":{\"layout:/\":\"s\"},\"__artifactCompatibility\":{\"schemaVersion\":1,\"graphVersion\":\"app-route-graph:1177fd80f83fa7b0\",\"deploymentVersion\":\"b9f856ce-42d7-4216-b786-6bd488655129\",\"appElementsSchemaVersion\":1,\"rscPayloadSchemaVersion\":1,\"rootBoundaryId\":\"/\",\"renderEpoch\":null},\"__renderObservation\":{\"schemaVersion\":1,\"output\":{\"kind\":\"app-rsc\",\"mountedSlotsFingerprint\":null,\"renderEpoch\":null,\"rootBoundaryId\":\"/\",\"routeId\":\"route:/\"},\"completeness\":\"partial\",\"boundaryOutcome\":{\"kind\":\"unknown\"},\"requestApis\":[{\"kind\":\"connection\",\"status\":\"unknown\"},{\"kind\":\"cookies\",\"status\":\"unknown\"},{\"kind\":\"draftMode\",\"status\":\"unknown\"},{\"kind\":\"headers\",\"status\":\"unknown\"},{\"kind\":\"params\",\"status\":\"unknown\"},{\"kind\":\"searchParams\",\"status\":\"unknown\"}],\"dynamicFetches\":[],\"cacheTags\":[\"/\",\"_N_T_/\",\"_N_T_/index\",\"_N_T_/layout\",\"_N_T_/page\"],\"pathTags\":[\"/\"],\"cacheability\":\"unknown\",\"downgrade\":{\"target\":\"freshRender\",\"reasons\":[{\"code\":\"CP_DOWNGRADE_CACHEABILITY_UNKNOWN\",\"target\":\"freshRender\"},{\"code\":\"CP_DOWNGRADE_INCOMPLETE_OBSERVATION\",\"completeness\":\"partial\",\"target\":\"freshRender\"},{\"code\":\"CP_DOWNGRADE_UNKNOWN_REQUEST_API\",\"requestApi\":\"connection\",\"target\":\"freshRender\"},{\"code\":\"CP_DOWNGRADE_UNKNOWN_REQUEST_API\",\"requestApi\":\"cookies\",\"target\":\"freshRender\"},{\"code\":\"CP_DOWNGRADE_UNKNOWN_REQUEST_API\",\"requestApi\":\"draftMode\",\"target\":\"freshRender\"},{\"code\":\"CP_DOWNGRADE_UNKNOWN_REQUEST_API\",\"requestApi\":\"headers\",\"target\":\"freshRender\"},{\"code\":\"CP_DOWNGRADE_UNKNOWN_REQUEST_API\",\"requestApi\":\"params\",\"target\":\"freshRender\"},{\"code\":\"CP_DOWNGRADE_UNKNOWN_REQUEST_API\",\"requestApi\":\"searchParams\",\"target\":\"freshRender\"}],\"fallback\":{\"kind\":\"breakerFallback\",\"code\":\"CP_PRIVATE_DYNAMIC_DOWNGRADE\",\"mode\":\"renderFresh\",\"scope\":\"affectedOutput\",\"fields\":{\"reasonCodes\":[\"CP_DOWNGRADE_CACHEABILITY_UNKNOWN\",\"CP_DOWNGRADE_INCOMPLETE_OBSERVATION\",\"CP_DOWNGRADE_UNKNOWN_REQUEST_API\",\"CP_DOWNGRADE_UNKNOWN_REQUEST_API\",\"CP_DOWNGRADE_UNKNOWN_REQUEST_API\",\"CP_DOWNGRADE_UNKNOWN_REQUEST_API\",\"CP_DOWNGRADE_UNKNOWN_REQUEST_API\",\"CP_DOWNGRADE_UNKNOWN_REQUEST_API\"],\"target\":\"freshRender\"}},\"isPublicCacheCandidate\":false}}}\n")</script><script>((self[Symbol.for("vinext.navigationRuntime")]??={bootstrap:{routeManifest:null},functions:{}}).bootstrap.rsc??={rsc:[]}).rsc.push("a:I[\"6efdf509a785\",[],\"default\",1]\n")</script><script>((self[Symbol.for("vinext.navigationRuntime")]??={bootstrap:{routeManifest:null},functions:{}}).bootstrap.rsc??={rsc:[]}).rsc.push("1:[\"$\",\"$La\",null,{\"params\":\"$@b\",\"searchParams\":\"$@c\"}]\n")</script><script>((self[Symbol.for("vinext.navigationRuntime")]??={bootstrap:{routeManifest:null},functions:{}}).bootstrap.rsc??={rsc:[]}).rsc.push("b:{}\n")</script><script>((self[Symbol.for("vinext.navigationRuntime")]??={bootstrap:{routeManifest:null},functions:{}}).bootstrap.rsc??={rsc:[]}).rsc.push("c:{}\n")</script><script>Object.assign(((self[Symbol.for("vinext.navigationRuntime")]??={bootstrap:{routeManifest:null},functions:{}}).bootstrap.rsc??={rsc:[]}),{"initialCacheKind":"dynamic"});((self[Symbol.for("vinext.navigationRuntime")]??={bootstrap:{routeManifest:null},functions:{}}).bootstrap.rsc??={rsc:[]}).done=true</script></body></html> |