\u8fd9\u662f\u4e00\u4e2aHTML\u4ee3\u7801，\u4e0a\u4f20\u56fe\u7247\u540e\u81ea\u52a8\u5c06\u5176\u5904\u7406\u6210\u50cf\u7d20\u65b9\u5757\u98ce\u683c，\u5e76\u652f\u6301\u8c03\u6574\u65b9\u5757\u5927\u5c0f\u548c\u4e0b\u8f7d\u7ed3\u679c\u3002<\/p>\n
\u00a0<\/p>\n
```html<\/p>\n
<!DOCTYPE html><\/p>\n
<html lang="zh-CN"><\/p>\n
<head><\/p>\n
<meta charset="UTF-8"><\/p>\n
<meta name="viewport" content="width=device-width, initial-scale=1.0"><\/p>\n
<title>\u56fe\u7247\u50cf\u7d20\u65b9\u5757\u5316<\/title><\/p>\n
<style><\/p>\n
\u00a0 * { box-sizing: border-box; }<\/p>\n
\u00a0 body {<\/p>\n
\u00a0 \u00a0 margin: 0; min-height: 100vh; padding: 24px;<\/p>\n
\u00a0 \u00a0 font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;<\/p>\n
\u00a0 \u00a0 background: #14161a; color: #e8eaed;<\/p>\n
\u00a0 \u00a0 display: flex; flex-direction: column; align-items: center; gap: 18px;<\/p>\n
\u00a0 }<\/p>\n
\u00a0 .panel {<\/p>\n
\u00a0 \u00a0 display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center;<\/p>\n
\u00a0 \u00a0 background: #1e2128; padding: 14px 18px; border-radius: 14px;<\/p>\n
\u00a0 \u00a0 box-shadow: 0 6px 24px rgba(0,0,0,.35);<\/p>\n
\u00a0 }<\/p>\n
\u00a0 label { display: flex; align-items: center; gap: 8px; font-size: 14px; }<\/p>\n
\u00a0 input[type="range"] { width: 160px; accent-color: #4f9cff; }<\/p>\n
\u00a0 button, .file-btn {<\/p>\n
\u00a0 \u00a0 border: none; border-radius: 9px; padding: 9px 16px; font-size: 14px;<\/p>\n
\u00a0 \u00a0 background: #4f9cff; color: #fff; cursor: pointer; transition: .2s;<\/p>\n
\u00a0 }<\/p>\n
\u00a0 button:hover, .file-btn:hover { background: #3a86e8; }<\/p>\n
\u00a0 button:disabled { opacity: .4; cursor: not-allowed; }<\/p>\n
\u00a0 #file { display: none; }<\/p>\n
\u00a0 #stage {<\/p>\n
\u00a0 \u00a0 max-width: 100%; display: flex; align-items: center; justify-content: center;<\/p>\n
\u00a0 \u00a0 border: 2px dashed #333842; border-radius: 16px; padding: 16px; min-height: 220px;<\/p>\n
\u00a0 \u00a0 width: min(1000px, 100%);<\/p>\n
\u00a0 }<\/p>\n
\u00a0 #stage.dragover { border-color: #4f9cff; background: rgba(79,156,255,.08); }<\/p>\n
\u00a0 canvas { max-width: 100%; height: auto; display: block; image-rendering: pixelated; }<\/p>\n
\u00a0 .hint { color: #7c8493; font-size: 13px; }<\/p>\n
\u00a0 .value { width: 34px; text-align: right; color: #4f9cff; font-variant-numeric: tabular-nums; }<\/p>\n
<\/style><\/p>\n
<\/head><\/p>\n
<body><\/p>\n
\u00a0<\/p>\n
\u00a0 <div class="panel"><\/p>\n
\u00a0 \u00a0 <label class="file-btn"><\/p>\n
\u00a0 \u00a0 \u00a0 \u9009\u62e9\u56fe\u7247<\/p>\n
\u00a0 \u00a0 \u00a0 <input type="file" id="file" accept="image\/*"><\/p>\n
\u00a0 \u00a0 <\/label><\/p>\n
\u00a0<\/p>\n
\u00a0 \u00a0 <label><\/p>\n
\u00a0 \u00a0 \u00a0 \u65b9\u5757\u5927\u5c0f<\/p>\n
\u00a0 \u00a0 \u00a0 <input type="range" id="size" min="2" max="64" value="12"><\/p>\n
\u00a0 \u00a0 \u00a0 <span class="value" id="sizeVal">12<\/span><\/p>\n
\u00a0 \u00a0 <\/label><\/p>\n
\u00a0<\/p>\n
\u00a0 \u00a0 <button id="download" disabled>\u4e0b\u8f7d PNG<\/button><\/p>\n
\u00a0 <\/div><\/p>\n
\u00a0<\/p>\n
\u00a0 <div id="stage"><\/p>\n
\u00a0 \u00a0 <p class="hint">\u70b9\u51fb\u300c\u9009\u62e9\u56fe\u7247\u300d，\u6216\u628a\u56fe\u7247\u62d6\u5230\u8fd9\u91cc \/ \u76f4\u63a5 Ctrl+V \u7c98\u8d34<\/p><\/p>\n
\u00a0 <\/div><\/p>\n
\u00a0<\/p>\n
<script><\/p>\n
\/* ========== \u5143\u7d20\u5f15\u7528 ========== *\/<\/p>\n
const fileInput = document.getElementById('file');<\/p>\n
const sizeInput = document.getElementById('size');<\/p>\n
const sizeVal = document.getElementById('sizeVal');<\/p>\n
const stage = document.getElementById('stage');<\/p>\n
const downloadBtn= document.getElementById('download');<\/p>\n
\u00a0<\/p>\n
let canvas = null; \/\/ \u8f93\u51fa\u753b\u5e03<\/p>\n
let ctx = null;<\/p>\n
let sourceImg = null; \/\/ \u539f\u59cb\u56fe\u7247\u5bf9\u8c61<\/p>\n
\u00a0<\/p>\n
\/* ========== \u8bfb\u53d6\u6587\u4ef6 ========== *\/<\/p>\n
function loadFile(file) {<\/p>\n
\u00a0 if (!file || !file.type.startsWith('image\/')) return;<\/p>\n
\u00a0 const url = URL.createObjectURL(file);<\/p>\n
\u00a0 const img = new Image();<\/p>\n
\u00a0 img.onload = () => {<\/p>\n
\u00a0 \u00a0 sourceImg = img;<\/p>\n
\u00a0 \u00a0 URL.revokeObjectURL(url);<\/p>\n
\u00a0 \u00a0 render();<\/p>\n
\u00a0 \u00a0 downloadBtn.disabled = false;<\/p>\n
\u00a0 };<\/p>\n
\u00a0 img.onerror = () => alert('\u56fe\u7247\u8bfb\u53d6\u5931\u8d25，\u8bf7\u6362\u4e00\u5f20\u8bd5\u8bd5');<\/p>\n
\u00a0 img.src = url;<\/p>\n
}<\/p>\n
\u00a0<\/p>\n
\/* ========== \u9ad8\u8d28\u91cf\u7f29\u5c0f（\u9010\u7ea7\u51cf\u534a，\u4fdd\u8bc1\u53d6\u5230\u51c6\u786e\u7684\u5e73\u5747\u8272） ========== *\/<\/p>\n
function downscale(src, srcW, srcH, dstW, dstH) {<\/p>\n
\u00a0 \/\/ \u5148\u628a\u539f\u56fe\u753b\u5230\u4e34\u65f6\u753b\u5e03<\/p>\n
\u00a0 let cur = document.createElement('canvas');<\/p>\n
\u00a0 cur.width = srcW; cur.height = srcH;<\/p>\n
\u00a0 cur.getContext('2d').drawImage(src, 0, 0);<\/p>\n
\u00a0<\/p>\n
\u00a0 let cw = srcW, ch = srcH;<\/p>\n
\u00a0<\/p>\n
\u00a0 \/\/ \u6bcf\u6b21\u7f29\u5c0f\u4e00\u534a，\u76f4\u5230\u63a5\u8fd1\u76ee\u6807\u5c3a\u5bf8，\u907f\u514d\u4e00\u6b21\u6027\u5927\u5e45\u7f29\u653e\u4ea7\u751f\u952f\u9f7f\/\u504f\u8272<\/p>\n
\u00a0 while (cw \/ 2 >= dstW && ch \/ 2 >= dstH && cw > 2 && ch > 2) {<\/p>\n
\u00a0 \u00a0 const nw = Math.max(1, Math.floor(cw \/ 2));<\/p>\n
\u00a0 \u00a0 const nh = Math.max(1, Math.floor(ch \/ 2));<\/p>\n
\u00a0 \u00a0 const next = document.createElement('canvas');<\/p>\n
\u00a0 \u00a0 next.width = nw; next.height = nh;<\/p>\n
\u00a0 \u00a0 const nctx = next.getContext('2d');<\/p>\n
\u00a0 \u00a0 nctx.imageSmoothingEnabled = true;<\/p>\n
\u00a0 \u00a0 nctx.imageSmoothingQuality = 'high';<\/p>\n
\u00a0 \u00a0 nctx.drawImage(cur, 0, 0, cw, ch, 0, 0, nw, nh);<\/p>\n
\u00a0 \u00a0 cur = next; cw = nw; ch = nh;<\/p>\n
\u00a0 }<\/p>\n
\u00a0<\/p>\n
\u00a0 \/\/ \u6700\u540e\u4e00\u6b65\u7f29\u5230\u76ee\u6807\u5c3a\u5bf8<\/p>\n
\u00a0 const out = document.createElement('canvas');<\/p>\n
\u00a0 out.width = dstW; out.height = dstH;<\/p>\n
\u00a0 const octx = out.getContext('2d');<\/p>\n
\u00a0 octx.imageSmoothingEnabled = true;<\/p>\n
\u00a0 octx.imageSmoothingQuality = 'high';<\/p>\n
\u00a0 octx.drawImage(cur, 0, 0, cw, ch, 0, 0, dstW, dstH);<\/p>\n
\u00a0 return out;<\/p>\n
}<\/p>\n
\u00a0<\/p>\n
\/* ========== \u6838\u5fc3：\u6e32\u67d3\u50cf\u7d20\u65b9\u5757\u56fe ========== *\/<\/p>\n
function render() {<\/p>\n
\u00a0 if (!sourceImg) return;<\/p>\n
\u00a0<\/p>\n
\u00a0 const block = Number(sizeInput.value); \/\/ \u6bcf\u4e2a\u65b9\u5757\u8fb9\u957f（\u50cf\u7d20）<\/p>\n
\u00a0 const W = sourceImg.naturalWidth;<\/p>\n
\u00a0 const H = sourceImg.naturalHeight;<\/p>\n
\u00a0<\/p>\n
\u00a0 \/\/ 1. \u8ba1\u7b97\u7f29\u7565\u56fe\u5c3a\u5bf8：\u539f\u56fe\u88ab\u5207\u6210\u591a\u5c11\u4e2a\u5c0f\u683c\u5b50<\/p>\n
\u00a0 const cols = Math.max(1, Math.round(W \/ block));<\/p>\n
\u00a0 const rows = Math.max(1, Math.round(H \/ block));<\/p>\n
\u00a0<\/p>\n
\u00a0 \/\/ 2. \u7f29\u5c0f\u6210 cols \u00d7 rows \u7684\u5c0f\u56fe，\u6bcf\u4e2a\u50cf\u7d20 = \u4e00\u4e2a\u65b9\u5757\u7684\u5e73\u5747\u8272<\/p>\n
\u00a0 const small = downscale(sourceImg, W, H, cols, rows);<\/p>\n
\u00a0 const smallData = small.getContext('2d').getImageData(0, 0, cols, rows).data;<\/p>\n
\u00a0<\/p>\n
\u00a0 \/\/ 3. \u51c6\u5907\u8f93\u51fa\u753b\u5e03<\/p>\n
\u00a0 if (!canvas) {<\/p>\n
\u00a0 \u00a0 canvas = document.createElement('canvas');<\/p>\n
\u00a0 \u00a0 ctx = canvas.getContext('2d');<\/p>\n
\u00a0 \u00a0 stage.innerHTML = '';<\/p>\n
\u00a0 \u00a0 stage.appendChild(canvas);<\/p>\n
\u00a0 }<\/p>\n
\u00a0<\/p>\n
\u00a0 const outW = cols * block;<\/p>\n
\u00a0 const outH = rows * block;<\/p>\n
\u00a0 canvas.width = outW;<\/p>\n
\u00a0 canvas.height = outH;<\/p>\n
\u00a0 ctx.imageSmoothingEnabled = false; \/\/ \u5173\u6389\u5e73\u6ed1，\u4fdd\u8bc1\u65b9\u5757\u8fb9\u7f18\u786c\u6717<\/p>\n
\u00a0 ctx.clearRect(0, 0, outW, outH);<\/p>\n
\u00a0<\/p>\n
\u00a0 \/\/ 4. \u9010\u683c\u94fa\u7eaf\u8272\u65b9\u5757（\u6bd4\u76f4\u63a5\u653e\u5927\u66f4\u9510\u5229，\u4e0d\u4f1a\u6709\u63d2\u503c\u6742\u8272）<\/p>\n
\u00a0 for (let y = 0; y < rows; y++) {<\/p>\n
\u00a0 \u00a0 for (let x = 0; x < cols; x++) {<\/p>\n
\u00a0 \u00a0 \u00a0 const i = (y * cols + x) * 4;<\/p>\n
\u00a0 \u00a0 \u00a0 const a = smallData[i + 3];<\/p>\n
\u00a0 \u00a0 \u00a0 if (a === 0) continue; \/\/ \u5168\u900f\u660e\u683c\u5b50\u8df3\u8fc7<\/p>\n
\u00a0 \u00a0 \u00a0 ctx.fillStyle = `rgba(${smallData[i]},${smallData[i+1]},${smallData[i+2]},${a \/ 255})`;<\/p>\n
\u00a0 \u00a0 \u00a0 ctx.fillRect(x * block, y * block, block, block);<\/p>\n
\u00a0 \u00a0 }<\/p>\n
\u00a0 }<\/p>\n
}<\/p>\n
\u00a0<\/p>\n
\/* ========== \u4ea4\u4e92\u4e8b\u4ef6 ========== *\/<\/p>\n
fileInput.addEventListener('change', e => loadFile(e.target.files[0]));<\/p>\n
\u00a0<\/p>\n
sizeInput.addEventListener('input', () => {<\/p>\n
\u00a0 sizeVal.textContent = sizeInput.value;<\/p>\n
\u00a0 render();<\/p>\n
});<\/p>\n
\u00a0<\/p>\n
downloadBtn.addEventListener('click', () => {<\/p>\n
\u00a0 if (!canvas) return;<\/p>\n
\u00a0 const a = document.createElement('a');<\/p>\n
\u00a0 a.download = `pixel-${sizeInput.value}px.png`;<\/p>\n
\u00a0 a.href = canvas.toDataURL('image\/png');<\/p>\n
\u00a0 a.click();<\/p>\n
});<\/p>\n
\u00a0<\/p>\n
\/* \u62d6\u62fd\u4e0a\u4f20 *\/<\/p>\n
['dragenter', 'dragover'].forEach(ev =><\/p>\n
\u00a0 stage.addEventListener(ev, e => { e.preventDefault(); stage.classList.add('dragover'); })<\/p>\n
);<\/p>\n
['dragleave', 'drop'].forEach(ev =><\/p>\n
\u00a0 stage.addEventListener(ev, e => { e.preventDefault(); stage.classList.remove('dragover'); })<\/p>\n
);<\/p>\n
stage.addEventListener('drop', e => loadFile(e.dataTransfer.files[0]));<\/p>\n
\u00a0<\/p>\n
\/* \u7c98\u8d34\u4e0a\u4f20 *\/<\/p>\n
document.addEventListener('paste', e => {<\/p>\n
\u00a0 const item = […(e.clipboardData?.items || [])].find(i => i.type.startsWith('image\/'));<\/p>\n
\u00a0 if (item) loadFile(item.getAsFile());<\/p>\n
});<\/p>\n
<\/script><\/p>\n
<\/body><\/p>\n
<\/html><\/p>\n
```<\/p>\n
\u00a0<\/p>\n
\u50cf\u7d20\u65b9\u5757\u5316\u5de5\u5177\u7684\u529f\u80fd\u62c6\u89e3<\/p>\n
\u00a0<\/p>\n
\u00b7 \u56fe\u7247\u4e0a\u4f20\u5165\u53e3：\u9875\u9762\u63d0\u4f9b\u201c\u9009\u62e9\u56fe\u7247\u201d\u6309\u94ae，\u540c\u65f6\u652f\u6301\u62d6\u62fd\u56fe\u7247\u5230\u865a\u7ebf\u533a\u57df，\u6216\u76f4\u63a5\u4f7f\u7528 Ctrl+V \u7c98\u8d34\u56fe\u7247\u3002<\/p>\n
\u00b7 \u65b9\u5757\u5927\u5c0f\u8c03\u8282：\u901a\u8fc7\u6ed1\u5757\u63a7\u5236\u6bcf\u4e2a\u50cf\u7d20\u65b9\u5757\u7684\u8fb9\u957f（2~64\u50cf\u7d20），\u62d6\u52a8\u65f6\u53f3\u4fa7\u6570\u503c\u4f1a\u540c\u6b65\u53d8\u5316，\u5e76\u5373\u65f6\u91cd\u65b0\u6e32\u67d3\u9884\u89c8\u3002<\/p>\n
\u00b7 \u50cf\u7d20\u5316\u6e32\u67d3\u903b\u8f91：\u5148\u7b97\u51fa\u539f\u56fe\u4f1a\u88ab\u5207\u6210\u591a\u5c11\u884c\u3001\u591a\u5c11\u5217，\u518d\u5c06\u539f\u56fe\u9ad8\u8d28\u91cf\u7f29\u5c0f\u5230\u5bf9\u5e94\u7684\u5c0f\u5c3a\u5bf8，\u6700\u540e\u9010\u4e2a\u65b9\u5757\u586b\u5145\u7eaf\u8272，\u4fdd\u8bc1\u8fb9\u7f18\u786c\u6717\u6e05\u6670\u3002<\/p>\n
\u00b7 \u7ed3\u679c\u5bfc\u51fa：\u70b9\u51fb\u201c\u4e0b\u8f7d PNG\u201d\u6309\u94ae，\u4f1a\u5c06\u5f53\u524d\u753b\u5e03\u5185\u5bb9\u4fdd\u5b58\u4e3a pixel-xxpx.png，\u65b9\u4fbf\u76f4\u63a5\u4f7f\u7528\u3002<\/p>\n
\u00a0<\/p>\n
—<\/p>\n
\u00a0<\/p>\n
\u4f18\u5316\u5efa\u8bae： \u82e5\u60f3\u6539\u53d8\u9ed8\u8ba4\u65b9\u5757\u5927\u5c0f，\u53ef\u8c03\u6574\u6ed1\u5757\u521d\u59cb\u503c（\u5f53\u524d\u4e3a12）；\u6700\u5927\u3001\u6700\u5c0f\u503c\u7531 min="2" \u548c max="64" \u63a7\u5236，\u60a8\u53ef\u6309\u9700\u4fee\u6539\u3002<\/p>\n
\u00a0<\/p>\n
\u00a0<\/p>\n
\u00a0<\/p>\n
\u00a0<\/p>\n
\u6587\u7ae0\u4ec5\u4f9b\u53c2\u8003\u5b66\u4e60\u7528\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u8fd9\u662f\u4e00\u4e2aHTML\u4ee3\u7801，\u4e0a\u4f20\u56fe\u7247\u540e\u81ea\u52a8\u5c06\u5176\u5904\u7406\u6210\u50cf\u7d20\u65b9\u5757\u98ce\u683c，\u5e76\u652f\u6301\u8c03\u6574\u65b9\u5757\u5927\u5c0f\u548c\u4e0b\u8f7d\u7ed3\u679c\u3002html