/pages/ Recent content in Pages on ゲーム開発部 Hugo zh-CN Thu, 16 Jul 2026 08:29:17 +0800 /pages/md2png/ Thu, 16 Jul 2026 08:29:17 +0800 /pages/md2png/ <div class="md2png-tool page-surface page-surface--sky"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/markdown/markdown.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> <style>@scope (.md2png-tool) { .md2png-tool { --border-color: #eeeeee; --bg-light: #ffffff; --accent-black: #000000; } * { box-sizing: border-box; margin: 0; padding: 0; } .md2png-tool { height: 100%; min-height: 100vh; min-height: 100svh; font-family: -apple-system, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; background: #fcfcfc; } /* 响应式主容器 */ .main-wrapper { display: flex; height: 100vh; height: 100svh; flex-direction: row; /* 默认电脑端左右 */ } /* 编辑器区域 */ .editor-area { width: 40%; display: flex; flex-direction: column; border-right: 1px solid var(--border-color); background: var(--bg-light); z-index: 10; } .CodeMirror { flex: 1; font-size: 14px; height: auto; } /* 预览区域 */ .preview-area { width: 60%; background: #f0f0f0; overflow-y: auto; overflow-x: hidden; padding: 20px 36px; position: relative; } .preview-stage { width: 100%; min-height: 100%; display: flex; justify-content: center; align-items: flex-start; padding: 10px 0 24px; } /* 控制面板优化 */ .control-panel { padding: 16px; background: #fff; border-top: 1px solid var(--border-color); } .control-row { display: flex; align-items: center; margin-bottom: 12px; gap: 10px; flex-wrap: wrap; /* 手机端自动换行 */ } .control-row label { font-size: 13px; min-width: 60px; color: #666; } .control-row input[type="range"] { flex: 1; min-width: 120px; /* 防止手机端缩得太小 */ } .val-indicator { font-size: 12px; min-width: 45px; text-align: right; font-variant-numeric: tabular-nums; } .action-row { display: flex; gap: 10px; flex-wrap: wrap; } .action-row .btn-action, .action-row .btn-save { flex: 1; min-width: 110px; width: auto; } .btn-action { padding: 12px; border: 1px solid var(--border-color); background: #fff; color: #111; border-radius: 4px; cursor: pointer; font-weight: 600; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; } .btn-action:hover { background: #f7f7f7; } .btn-danger { border-color: #f0c7c7; color: #b42318; background: #fffafa; } .btn-danger:hover { background: #fff1f1; } /* 导出容器样式 */ #export-target { background: white; padding: 40px; flex-shrink: 0; /* 极其重要：禁止收缩宽度 */ margin: 20px auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); transform-origin: top center; will-change: transform; align-self: center; } /* ========= Markdown 渲染样式 (核心修复) ========= */ .markdown-body { line-height: 1.7; color: #1a1a1a; word-wrap: break-word; } /* 标题层级 */ .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin-top: 1.2em; margin-bottom: 0.6em; font-weight: 700; line-height: 1.4; color: #111; } .markdown-body h1 { font-size: 2em; border-bottom: 2px solid #eee; padding-bottom: 0.3em; } .markdown-body h2 { font-size: 1.6em; border-bottom: 1px solid #eee; padding-bottom: 0.25em; } .markdown-body h3 { font-size: 1.35em; } .markdown-body h4 { font-size: 1.15em; } .markdown-body h5 { font-size: 1em; color: #444; } .markdown-body h6 { font-size: 0.9em; color: #666; } /* 段落间距 */ .markdown-body p { margin-bottom: 1em; } /* 列表缩进 (关键修复) */ .markdown-body ul, .markdown-body ol { padding-left: 2.2em; margin-bottom: 1em; } .markdown-body li { margin-bottom: 0.3em; } /* 嵌套列表也要保持缩进 */ .markdown-body ul ul, .markdown-body ol ol, .markdown-body ul ol, .markdown-body ol ul { margin-top: 0.3em; margin-bottom: 0.3em; } /* 引用块 */ .markdown-body blockquote { margin: 1em 0; padding: 0.6em 1.2em; border-left: 4px solid #ccc; background: #f9f9f9; color: #555; } /* 代码块与行内代码 */ .markdown-body code { background: #f5f5f5; padding: 0.2em 0.4em; border-radius: 4px; font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace; font-size: 0.9em; color: #c7254e; } .markdown-body pre { background: #f8f8f8; padding: 16px; border-radius: 6px; overflow-x: auto; margin: 1.2em 0; border: 1px solid #e1e1e1; } .markdown-body pre code { background: none; padding: 0; font-size: 0.9em; color: #333; } /* 表格 */ .markdown-body table { width: 100% !important; border-collapse: collapse; margin: 1.5em 0; table-layout: auto; } .markdown-body th, .markdown-body td { border: 1px solid #ddd; padding: 10px 12px; text-align: left; } .markdown-body th { background: #f5f5f5; font-weight: 600; } /* 图片自适应 */ .markdown-body img { max-width: 100%; height: auto; border-radius: 4px; } /* 分割线 */ .markdown-body hr { border: none; border-top: 2px solid #eaeaea; margin: 2em 0; } /* 按钮 */ .btn-save { width: 100%; padding: 12px; background: var(--accent-black); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 600; transition: opacity 0.2s; } .btn-save:hover { opacity: 0.85; } /* --- 手机端适配 (Max-width: 768px) --- */ @media (max-width: 768px) { .main-wrapper { flex-direction: column; /* 改为上下排列 */ } .editor-area { width: 100%; height: 45vh; height: 45svh; /* 编辑器占上半部分 */ border-right: none; border-bottom: 1px solid var(--border-color); } .preview-area { width: 100%; height: 55vh; height: 55svh; padding: 10px 14px; } .preview-stage { padding: 0 0 16px; } #export-target { margin: 10px auto; padding: 25px; /* 手机端适当减小内边距 */ } .markdown-body { font-size: inherit; /* 继承动态字体大小 */ } } }</style> <style> .md2png-tool.page-surface { max-width: 100%; padding: 0; overflow: hidden; border-color: var(--page-line); box-shadow: 3px 3px 0 rgba(212,107,145,.35); } .md2png-tool .main-wrapper { display: grid; grid-template-columns: minmax(280px, 38%) minmax(0, 1fr); height: clamp(560px, 72svh, 780px); min-height: 0; max-width: 100%; overflow: hidden; background: var(--page-paper); } .md2png-tool .editor-area { width: auto; min-width: 0; border-right: 2px solid var(--page-line); background: #fffdf5; } .md2png-tool .CodeMirror { min-width: 0; color: var(--page-ink); background: #fff; } .md2png-tool .control-panel { padding: 12px; background: var(--page-accent-soft); border-top: 2px solid var(--page-line); } .md2png-tool .control-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 52px; gap: 8px; margin-bottom: 8px; } .md2png-tool .control-row label { min-width: 0; color: var(--page-accent); font-weight: 700; } .md2png-tool .control-row input[type="range"] { min-width: 0; width: 100%; accent-color: var(--page-pink); } .md2png-tool .val-indicator { min-width: 0; color: var(--page-pink); font-weight: 700; } .md2png-tool .action-row { gap: 6px; } .md2png-tool .action-row .btn-action, .md2png-tool .action-row .btn-save { min-width: 0; padding: 9px 6px; font-size: 12px; border-radius: 2px; } .md2png-tool .preview-area { width: auto; min-width: 0; padding: 14px; overflow: auto; background-color: var(--page-sky); background-image: radial-gradient(circle at 4px 4px, rgba(42,138,120,.16) 0 1px, transparent 1.5px), radial-gradient(circle at 12px 12px, rgba(212,107,145,.14) 0 1px, transparent 1.5px); background-size: 16px 16px; } .md2png-tool .preview-stage { width: 100%; min-width: 0; min-height: 100%; overflow: hidden; padding: 4px 0 22px; } .md2png-tool #export-target { max-width: none; margin: 12px auto; border: 1px solid var(--page-line); box-shadow: 3px 3px 0 rgba(31,106,90,.14); } @media (max-width: 768px) { .md2png-tool .main-wrapper { grid-template-columns: 1fr; grid-template-rows: minmax(330px, 46%) minmax(0, 1fr); height: clamp(680px, 84svh, 900px); } .md2png-tool .editor-area { border-right: 0; border-bottom: 2px solid var(--page-line); } .md2png-tool .preview-area { padding: 10px; } } </style> <div class="main-wrapper"> <div class="editor-area"> <textarea id="md-editor"> # 极简 Markdown 转图 ## 功能亮点 - ✅ 标题层级完整 **(H1-H6)** - ✅ 列表缩进清晰** (有序/无序)** - ✅ 表格自适应宽度**（不会超出图片的宽度）** - ✅ 加粗块内可以紧跟符号**(“\*\*\(\)\*\*”可以被识别为加粗)** ### 使用步骤 1. 在左侧编辑 Markdown 2. 调整字体大小与图片宽度 3. 点击 **保存图片** 下载 PNG > 提示：导出的图片将包含所有样式，适合直接分享。 | 规格 | 适配情况 | | :--- | :--- | | PC端 | 左右分割布局 | | 移动端 | 上下堆叠布局 | | 表格 | 始终撑满且不溢出 | `行内代码` 与代码块示例： ```python print("Kirari.fun") ``` </textarea> <div class="control-panel"> <div class="control-row"> <label>工作区高度</label> <input type="range" id="range-workspace-height" min="440" max="1100" value="680" step="10"> <span class="val-indicator" id="val-workspace-height">680px</span> </div> <div class="control-row"> <label>字体大小</label> <input type="range" id="range-fs" min="13" max="28" value="17"> <span class="val-indicator" id="val-fs">17px</span> </div> <div class="control-row"> <label>图片宽度</label> <input type="range" id="range-width" min="400" max="1400" value="900" step="10"> <span class="val-indicator" id="val-width">900px</span> </div> <div class="control-row"> <label>阴影强度</label> <input type="range" id="range-shadow" min="0" max="4" value="2" step="1"> <span class="val-indicator" id="val-shadow">2档</span> </div> <div class="action-row"> <button type="button" class="btn-action btn-danger" onclick="clearEditor()">清空</button> <button type="button" class="btn-action" onclick="pasteFromClipboard()">一键粘贴</button> <button type="button" class="btn-save" onclick="saveToImage()">💾 保存图片 (PNG)</button> </div> </div> </div> <div class="preview-area"> <div class="preview-stage"> <div id="export-target"> <div id="html-render" class="markdown-body"></div> </div> </div> </div> </div> <script> (function() { // 获取DOM元素 const editorTextarea = document.getElementById('md-editor'); const renderEl = document.getElementById('html-render'); const targetEl = document.getElementById('export-target'); const previewArea = document.querySelector('.preview-area'); const previewStage = document.querySelector('.preview-stage'); const fsInput = document.getElementById('range-fs'); const widthInput = document.getElementById('range-width'); const shadowInput = document.getElementById('range-shadow'); const workspaceHeightInput = document.getElementById('range-workspace-height'); const valWorkspaceHeight = document.getElementById('val-workspace-height'); const toolRoot = document.querySelector('.md2png-tool'); const valFs = document.getElementById('val-fs'); const valWidth = document.getElementById('val-width'); const valShadow = document.getElementById('val-shadow'); const saveBtn = document.querySelector('.btn-save'); /** * 兼容性增强：先把代码块和行内代码替换成占位符， * 再把 **...** 转成 <strong>... </strong>，避免括号、符号等内容 * 在某些 Markdown 解析场景下被漏掉。 */ function normalizeBoldSyntax(mdText) { const placeholders = []; const protect = (pattern, text) => text.replace(pattern, (match) => { const token = `__MD_PLACEHOLDER_${placeholders.length}__`; placeholders.push(match); return token; }); let text = mdText; text = protect(/```[\s\S]*?```/g, text); text = protect(/`[^`\n]+`/g, text); text = text.replace(/\*\*((?:\\.|[^*\n])+?)\*\*/g, '<strong>$1</strong>'); return text.replace(/__MD_PLACEHOLDER_(\d+)__/g, (_, index) => placeholders[Number(index)]); } // 初始化 CodeMirror 编辑器 const cm = CodeMirror.fromTextArea(editorTextarea, { mode: 'markdown', lineWrapping: true, theme: "default", tabSize: 2, }); /** * 刷新预览：重新渲染 Markdown 并应用滑块参数 */ function refreshPreview() { // 获取当前 Markdown 文本 const mdText = cm.getValue(); // 先做加粗语法兼容处理，再交给 marked 解析为 HTML renderEl.innerHTML = marked.parse(normalizeBoldSyntax(mdText)); // 读取滑块值 const fontSize = fsInput.value; const targetWidth = widthInput.value; const shadowLevel = Number(shadowInput.value); const workspaceHeight = workspaceHeightInput.value; // 更新显示数值 valFs.textContent = fontSize + 'px'; valWidth.textContent = targetWidth + 'px'; valShadow.textContent = shadowLevel === 0 ? '关闭' : `${shadowLevel}档`; valWorkspaceHeight.textContent = workspaceHeight + 'px'; // 动态设置样式 (字体大小应用到渲染容器，宽度应用到导出目标) renderEl.style.fontSize = fontSize + 'px'; targetEl.style.width = targetWidth + 'px'; // 预览区超宽时自动缩小，避免横向滚动条 updatePreviewScale(); } /** * 让预览卡片始终适配预览区域宽度 */ function updatePreviewScale() { const targetWidth = parseFloat(widthInput.value); const stageWidth = previewStage.clientWidth; const scale = targetWidth > 0 ? Math.min(1, stageWidth / targetWidth) : 1; if (scale < 1) { targetEl.style.transform = `scale(${scale})`; } else { targetEl.style.transform = 'none'; } targetEl.style.marginLeft = 'auto'; targetEl.style.marginRight = 'auto'; } /** * 清空编辑器内容 */ function clearEditor() { cm.setValue(''); cm.focus(); } /** * 从剪贴板读取文本并替换编辑器内容 */ async function pasteFromClipboard() { try { if (!navigator.clipboard || !navigator.clipboard.readText) { throw new Error('Clipboard API unavailable'); } const text = await navigator.clipboard.readText(); cm.setValue(text || ''); cm.focus(); } catch (error) { console.error('读取剪贴板失败:', error); const pastedText = window.prompt('当前浏览器无法直接读取剪贴板，请手动粘贴内容：', ''); if (pastedText !== null) { cm.setValue(pastedText); cm.focus(); } } } // 监听编辑器内容变化 cm.on('change', refreshPreview); // 监听滑块变化 fsInput.addEventListener('input', refreshPreview); widthInput.addEventListener('input', refreshPreview); shadowInput.addEventListener('input', refreshPreview); workspaceHeightInput.addEventListener('input', refreshPreview); window.addEventListener('resize', updatePreviewScale); // 初次加载时立即渲染 refreshPreview(); /** * 导出为 PNG 图片 */ async function saveToImage() { // 保存按钮原始文本 const originalText = saveBtn.textContent; const shadowLevel = Number(shadowInput.value); saveBtn.textContent = '⏳ 正在生成高清图片...'; saveBtn.disabled = true; try { const baseCanvas = await html2canvas(targetEl, { scale: 2, // 2倍分辨率，保证文字清晰 useCORS: true, backgroundColor: null, allowTaint: false, onclone: (clonedDoc) => { const clonedTarget = clonedDoc.getElementById('export-target'); const clonedBody = clonedDoc.getElementById('html-render'); if (clonedTarget) { clonedTarget.style.transform = 'none'; clonedTarget.style.margin = '0'; clonedTarget.style.boxShadow = 'none'; } if (clonedBody) { clonedBody.style.color = '#1a1a1a'; clonedBody.style.background = 'transparent'; } }, }); let canvas = baseCanvas; if (shadowLevel > 0) { // Controls the transparent margin around the exported card shadow. const shadowPadding = 110; const shadowConfigs = { 1: { color: 'rgba(0, 0, 0, 0.24)', blur: 34, offsetY: 12 }, 2: { color: 'rgba(0, 0, 0, 0.32)', blur: 50, offsetY: 18 }, 3: { color: 'rgba(0, 0, 0, 0.40)', blur: 66, offsetY: 24 }, 4: { color: 'rgba(0, 0, 0, 0.48)', blur: 86, offsetY: 32 }, }; const shadowConfig = shadowConfigs[shadowLevel] || shadowConfigs[2]; const shadowCanvas = document.createElement('canvas'); shadowCanvas.width = baseCanvas.width + shadowPadding * 2; shadowCanvas.height = baseCanvas.height + shadowPadding * 2; const ctx = shadowCanvas.getContext('2d'); ctx.clearRect(0, 0, shadowCanvas.width, shadowCanvas.height); ctx.shadowColor = shadowConfig.color; ctx.shadowBlur = shadowConfig.blur; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = shadowConfig.offsetY; ctx.fillStyle = '#ffffff'; ctx.fillRect(shadowPadding, shadowPadding, baseCanvas.width, baseCanvas.height); ctx.shadowColor = 'transparent'; ctx.drawImage(baseCanvas, shadowPadding, shadowPadding); canvas = shadowCanvas; } // 创建下载链接 const link = document.createElement('a'); const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-'); link.download = `markdown-${timestamp}.png`; link.href = canvas.toDataURL('image/png'); link.click(); } catch (error) { console.error('导出图片失败:', error); alert('❌ 保存失败，请刷新后重试。\n如果问题持续，请检查浏览器控制台。'); } finally { // 恢复按钮状态 saveBtn.textContent = originalText; saveBtn.disabled = false; } } // 将保存函数挂载到全局作用域，以便 onclick 调用 window.saveToImage = saveToImage; window.clearEditor = clearEditor; window.pasteFromClipboard = pasteFromClipboard; })(); </script> </div><style> .md2png-tool .main-wrapper { height: var(--md2png-workspace-height, 680px); max-height: calc(100svh - 110px); } .md2png-tool .control-panel { order: -1; flex: 0 0 auto; } .md2png-tool .CodeMirror { min-height: 0; } @media (max-width: 768px) { .md2png-tool .main-wrapper { height: var(--md2png-workspace-height, 720px); max-height: none; } } </style><script> (() => { const root = document.querySelector(".md2png-tool"); const workspace = root?.querySelector(".main-wrapper"); const target = root?.querySelector("#export-target"); const widthInput = root?.querySelector("#range-width"); if (!root || !workspace || !target) return; const updateWorkspaceHeight = () => { const minimum = Number.parseInt(getComputedStyle(root).getPropertyValue("--page-workspace-height"), 10) || 680; const previewHeight = Math.ceil(target.getBoundingClientRect().height + 36); workspace.style.height = `${Math.min(1400, Math.max(minimum, previewHeight))}px`; }; const observer = new ResizeObserver(() => requestAnimationFrame(updateWorkspaceHeight)); observer.observe(target); widthInput?.addEventListener("input", () => requestAnimationFrame(updateWorkspaceHeight)); requestAnimationFrame(updateWorkspaceHeight); setTimeout(updateWorkspaceHeight, 200); })(); </script> /pages/bgremover/ Thu, 16 Jul 2026 08:17:00 +0800 /pages/bgremover/ <style> .bgremover-tool { padding: 16px; color: var(--page-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .bgremover-panel { width: 100%; max-width: 896px; margin: 0 auto; padding: 24px; background: #fff; border: 2px solid var(--page-line); box-shadow: 3px 3px 0 rgba(212,107,145,.35); } .bgremover-panel > div:first-child { margin-bottom: 24px; text-align: center; } .bgremover-panel h1 { margin: 0; color: var(--page-accent); font-size: 28px; line-height: 1.25; } .bgremover-panel h1 + p { margin: 8px 0 0; color: var(--page-muted); } .bgremover-controls { justify-content: center; margin-bottom: 18px; } .bgremover-controls input[type="file"] { display: none; } .bgremover-controls label, .bgremover-controls button, .bgremover-download a { display: inline-block; padding: 7px 12px; color: #fff; background: #2fa888; border: 1px solid var(--page-accent); box-shadow: 1px 1px 0 rgba(31,106,90,.25); cursor: pointer; font-weight: 700; } .bgremover-controls button { background: #5fa8d0; border-color: #2a6a8a; } .bgremover-controls button:disabled { color: #fff; background: #9aaeb1; border-color: #84989a; cursor: not-allowed; } .bgremover-controls input[type="range"] { accent-color: var(--page-pink); } .bgremover-tool #infoMessage { margin: 0 0 20px; padding: 8px 10px; color: var(--page-muted); background: var(--page-yellow); border: 1px dashed #dbbd68; text-align: center; } .bgremover-canvases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .bgremover-canvases > div { min-width: 0; text-align: center; } .bgremover-canvases h2 { margin: 0 0 8px; color: var(--page-accent); font-size: 18px; } .bgremover-tool canvas { max-width: 100%; height: auto; border: 1px solid var(--page-line); box-shadow: 2px 2px 0 rgba(31,106,90,.15); } .bgremover-download { margin-top: 22px; text-align: center; } .bgremover-download a { background: #d96286; border-color: var(--page-pink); text-decoration: none; } .bgremover-tool .hidden { display: none; } @media (max-width: 768px) { .bgremover-tool { padding: 8px; } .bgremover-panel { padding: 16px; } .bgremover-canvases { grid-template-columns: 1fr; } } </style><div class="bgremover-tool page-surface page-surface--sky"><div class="bgremover-panel"> <div class="text-center mb-8"> <h1 class="text-3xl md:text-4xl font-bold text-gray-900">图片背景移除</h1> <p class="text-gray-600 mt-2">上传单色背景图片，将背景处理为透明。</p>