2d:null 2e:["$","title",null,{"children":"[FFXIV] 生成雪碧图 | UnluckyNinja | Observable"}] 33:Tb3a,async function generateSpriteSheet(skipfetch = false){ mutable generating = true mutable errorsCount = 0 skiprest const controller = new AbortController invalidation.then(()=>{ controller.abort() }) if (mutable result) { URL.revokeObjectURL(mutable result) } if (!skipfetch) { for (let i = 0; i < 1000; ++i) { if (controller.signal.aborted) { break } mutable processing = `正在获取 ${i+1}/1000` await fetchIcon(iconStart+i) } } const blob20 = await _generateSpriteSheet(iconStart, { size: 20, iconPerRow, targetFormat, targetQuality, updateProgress: (message)=> mutable processing = `${iconStart.toFixed(0).padStart(6, '0')}_20 ${message}` }) const blob40 = await _generateSpriteSheet(iconStart, { size: 40, iconPerRow, targetFormat, targetQuality, updateProgress: (message)=> mutable processing = `${iconStart.toFixed(0).padStart(6, '0')}_40 ${message}` }) const blob80 = await _generateSpriteSheet(iconStart, { size: 80, iconPerRow, targetFormat, targetQuality, updateProgress: (message)=> mutable processing = `${iconStart.toFixed(0).padStart(6, '0')}_80 ${message}` }) const obj = { s20: blob20 ? Math.floor(blob20.size/1024)+'KB' : '', s40: blob40 ? Math.floor(blob40.size/1024)+'KB' : '', s80: blob80 ? Math.floor(blob80.size/1024)+'KB' : '', } mutable outputSize = obj if (mutable preview) { URL.revokeObjectURL(mutable preview) } mutable preview = URL.createObjectURL(blob80) const promise = new Promise(async (resolve, reject)=>{ const buffer = new ArrayBuffer(1024*1024, {maxByteLength: 1024*1024*100}) const array = new Uint8Array(buffer) let totalBytes = 0 const zip = new fflate.Zip((err, chunk, final)=>{ if (err) { console.error(err) reject(err) return } if (chunk) { array.set(chunk, totalBytes) totalBytes += chunk.byteLength } if (final) { resolve(array.slice(0, totalBytes)) } }) if (blob20) { const file20 = new fflate.AsyncZipDeflate(`Pack_${iconStart}_20.${targetFormat}`, {level: 0}) zip.add(file20) file20.push(await blob20.bytes(), true) } if (blob40) { const file40 = new fflate.AsyncZipDeflate(`Pack_${iconStart}_40.${targetFormat}`, {level: 0}) zip.add(file40) file40.push(await blob40.bytes(), true) } if (blob80) { const file80 = new fflate.AsyncZipDeflate(`Pack_${iconStart}_80.${targetFormat}`, {level: 0}) zip.add(file80) file80.push(await blob80.bytes(), true) } zip.end() }) const zip = await promise const file = new Blob([zip], {type: 'application.zip'}) mutable result = URL.createObjectURL(file) mutable generating = false mutable processing = '' }34:T741,async function _generateSpriteSheet(iconStart, options = {}) { const { size, hq = false, updateProgress, iconPerRow = 20, targetFormat = 'webp', targetQuality = 0.8, } = options if (!iconStart && iconStart !== 0) throw new Error('iconStart must be valid') function _update(message) { if (updateProgress) { updateProgress(message) } } const canvas = new OffscreenCanvas(iconPerRow * size, Math.ceil(1000/iconPerRow) * size) const context = canvas.getContext('2d') let retryCounter = 0 let amount = 0 for (let i = 0; i < 1000; i++) { _update(`${i+1}/1000`) try { const posX = (i % iconPerRow)*size const posY = Math.floor(i / iconPerRow)*size const iconBlob = await getIcon(iconStart + i, hq) if (!iconBlob) { ++mutable errorsCount continue } const bitmap = await createImageBitmap(iconBlob) let dWidth = size let dHeight = size const ratio = bitmap.width / bitmap.height if (bitmap.width !== bitmap.height) { if (ratio > 1) { dHeight = dWidth / ratio } else { dWidth = dHeight * ratio } } context.drawImage(bitmap, posX, posY, dWidth, dHeight) bitmap.close() retryCounter = 0 amount = i+1 } catch(e) { // 如果出错后最多重试3次，然后重置计数器 ++mutable errorsCount if (retryCounter < 3) { --i ++retryCounter } else { retryCounter = 0 } } } if (amount === 0) { return null } const copy = new OffscreenCanvas(iconPerRow * size, Math.ceil(amount/iconPerRow) * size).getContext('2d') copy.drawImage(canvas, 0, 0) const blob = await copy.canvas.convertToBlob({type: 'image/'+targetFormat, quality: targetQuality}) return blob }35:T4bb,// 打包单独图标 async function zipIconCache(iconStart) { mutable generatingZip = true const promise = new Promise(async (resolve, reject)=>{ const buffer = new ArrayBuffer(1024*1024, {maxByteLength: 1024*1024*100}) const array = new Uint8Array(buffer) let totalBytes = 0 const zip = new fflate.Zip((err, chunk, final)=>{ if (err) { console.error(err) reject(err) return } if (chunk) { array.set(chunk, totalBytes) totalBytes += chunk.byteLength } if (final) { resolve(array.slice(0, totalBytes)) } }) for (let i = iconStart; i < iconStart+1000; ++i) { const icon = store.cache.get(i) // const icon = store.cacheHR.get(i) if (!icon) continue const file = new fflate.AsyncZipDeflate(`${i}${hr?'_hr':''}.png`, {level: 0}) zip.add(file) file.push(await icon.bytes(), true) } zip.end() }) const zip = await promise mutable generatingZip = false const file = new Blob([zip], {type: 'application.zip'}) if (mutable generatedZip) { URL.revokeObjectURL(mutable generatedZip) } mutable generatedZip = URL.createObjectURL(file) return zip }36:Te06,async function filedrop(event){ mutable generatingZip = true if (mutable generatedPack) { URL.revokeObjectURL(mutable generatedPack) mutable generatedPack = null } const items = event.dataTransfer.items event.preventDefault() const promise = new Promise(async (resolve, reject)=>{ // --- fflate const sizespan = 1024*1024*100 const buffer = new ArrayBuffer(1024*1024, {maxByteLength: 1024*1024*500}) const array = new Uint8Array(buffer) let totalBytes = 0 const zip = new fflate.Zip((err, chunk, final)=>{ if (err) { console.error(err) reject(err) return } if (chunk) { if (chunk.byteLength + totalBytes > buffer.byteLength) { buffer.resize(Math.min((buffer.byteLength+chunk.byteLength)*1.5, 1024*1024*500)) } array.set(chunk, totalBytes) totalBytes += chunk.byteLength } if (final) { resolve(array.slice(0, totalBytes)) } }) // --- const itemEntries = [] for (const item of items) { itemEntries.push(item.webkitGetAsEntry()) } for (const folder of itemEntries) { if (!folder.isDirectory) { console.log(`${folder.name} 不是文件夹`) continue } const iconStart = parseInt(folder.name) console.log(`处理文件夹: ${folder.name}`) if (iconStart === NaN) continue // 筛选子文件，并放入store const entries = await utils.readDirectory(folder) let hasHQ = false for (let idx = 0; idx < entries.length; ++idx) { const entry = entries[idx] if (entry.isDirectory && entry.name === 'hq') { console.log(`文件夹存在高清图标: ${folder.name}/hq`) hasHQ = true const subentries = await utils.readDirectory(entry) for (let jdx = 0; jdx < subentries.length; ++jdx) { const entry = subentries[jdx] if (!entry.isFile) continue const extPos = entry.name.lastIndexOf('.') if (extPos < 0) continue const name = entry.name.substring(0, extPos) const num = parseInt(name) if (num === NaN) continue const file = await utils.fileAsPromise(entry) store.cacheHQ.set(num, file) } continue } if (!entry.isFile) continue const extPos = entry.name.lastIndexOf('.') if (extPos < 0) continue const name = entry.name.substring(0, extPos) const num = parseInt(name) if (num === NaN) continue const file = await utils.fileAsPromise(entry) store.cache.set(num, file) } async function gensheet(size, hq){ const blob = await _generateSpriteSheet(iconStart, { size, hq, iconPerRow, targetFormat, targetQuality, updateProgress: (message)=> mutable processing = `${iconStart.toFixed(0).padStart(6, '0')}_${size} ${message}` }) const file = new fflate.AsyncZipDeflate(`Pack_${iconStart.toFixed(0).padStart(6, '0')}_${hq?'hq_':''}${size}.${targetFormat}`, {level: 0}) zip.add(file) file.push(await blob.bytes(), true) } for (const size of [20, 40, 80]) { await gensheet(size, false) if (hasHQ) { await gensheet(size, true) } } } zip.end() }) const zip = await promise mutable generatingZip = false const file = new Blob([zip], {type: 'application.zip'}) mutable generatedPack = URL.createObjectURL(file) return zip }37:[] 31:{"id":"3579c7e9ae1644e9","slug":"ffxiv-spritesheet","title":"[FFXIV] 生成雪碧图","thumbnail":"410d81e49fdad4cf327530757aacbcd2ec3d2c65ecdace6b860b538cd248ef5e","access_level":"public","create_time":"$D2026-09-06T08:53:27.044Z","update_time":"$D2026-09-08T20:12:08.087Z","view_time":null,"first_public_time":"$D2026-09-06T16:15:34.603Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ebb6118c9a990a2c","login":"unluckyninja","name":"UnluckyNinja","avatar_url":"https://avatars-next.observableusercontent.com/95d8d23bafa30b0b30e2ead4a72666d02cc17899c3c958c22c65fc0fc09afe3d","tier":"starter_2024"},"version":524,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4df1f6fd87aa7295","login":"unluckyninja","name":"UnluckyNinja","avatar_url":"https://avatars-next.observableusercontent.com/95d8d23bafa30b0b30e2ead4a72666d02cc17899c3c958c22c65fc0fc09afe3d","tier":null}],"members":[{"type":"team","id":"ebb6118c9a990a2c","login":"unluckyninja","name":"UnluckyNinja","avatar_url":"https://avatars-next.observableusercontent.com/95d8d23bafa30b0b30e2ead4a72666d02cc17899c3c958c22c65fc0fc09afe3d","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"618097a6397b7b90","slug":"ffxiv","title":"FFXIV","owner":{"id":"ebb6118c9a990a2c","login":"unluckyninja","name":"UnluckyNinja"}},"type":"notebook","body":{"title":"[FFXIV] 生成雪碧图","cells":[{"id":1,"value":"# [FFXIV] 生成雪碧图","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"如果没有文件，可以从网络生成， \n如果有文件，可以直接拖入","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":269,"value":"viewof apiSource = Inputs.radio(['xivapi', 'cafe'], {label: \"API端点\", value: 'cafe'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"viewof iconStart = Inputs.range([0, 999000], {label: \"图标区间(1000)\", step: 1000, value: 88000, format: it=>`${it}`.padStart(6, 0)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"viewof iconPerRow = Inputs.range([0, 40], {label: \"每行图标数\", step: 1, value: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"viewof hr = Inputs.toggle({label: \"高分辨率\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof format = Inputs.text({label: \"原始格式\", value: 'tex'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"viewof targetFormat = Inputs.radio(['png', 'jpg', 'webp'], {label: \"生成格式\", value: 'webp'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"viewof targetQuality = Inputs.range([0, 1], {label: \"生成图像质量\", step: 0.01, value: 0.8})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"{\n const icon = `${iconStart+0}`.padStart(6, '0')\n const path = encodeURIComponent(`ui/icon/${iconStartPadded}/${icon}${hr?'_hr1':''}.${format}`)\n const icon0 = htl.html`

xivapi图标编号 ${iconStart}：

`\n const icon1 = htl.html`

cafe图标编号 ${iconStart}：

`\n return htl.html`${icon0}${icon1}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"## 1. 从网络获取并生成","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"viewof button = Inputs.button(generating ? '生成中，请等待' : \"生成图片\", { disabled: generating, reduce: generateSpriteSheet})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"{\n if (generating) {\n const button = htl.html``\n button.addEventListener('click', ()=>{\n mutable skiprest = true\n })\n return htl.html`生成中 ${processing}
错误: ${errorsCount}
${button}`\n }\n if (!result) {\n return htl.html`调整完选项后点击生成图片`\n }\n return htl.html`下载图片

大小:
20px: ${outputSize.s20}
40px: ${outputSize.s40}
80px: ${outputSize.s80}
点击下载或右键另存为，直接右键复制可能会膨胀图片大小

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"

预览

\n${preview ? htl.html`

` : null}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":436,"value":"### 下载单独图片测试用","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":290,"value":"viewof button2 = Inputs.button(generatingZip ? '生成中，请等待' : \"打包单独图标到zip\", { disabled: generatingZip, reduce: ()=> zipIconCache(iconStart)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"{\n if (!generatedZip) {\n return htl.html`请先打包`\n }\n return htl.html`下载压缩包`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"## 2. 从本地文件生成（WIP）\n每行图标数和生成图片格式、质量复用前面的控件","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":348,"value":"

拖动一个或多个文件夹到此处

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":481,"value":"{\n if (generatedPack) {\n return htl.html`下载压缩包`\n }\n if (processing) {\n return htl.html`正在处理 ${processing}`\n }\n return htl.html`拖入后即开始打包`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"store = ({\n cache: new Map(),\n cacheHQ: new Map()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"async function fetchIcon(i) {\n if (store.cache.has(i)) {\n return store.cache.get(i)\n } else {\n const res = await fetch(getIconPath(i))\n if (res.status === 404) {\n store.cache.set(i, null)\n return null\n }\n if (res.status !== 200) {\n throw new Error('status not 200 or 404')\n }\n const blob = await res.blob()\n store.cache.set(i, blob)\n return blob\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"async function getIcon(i, hq = false){\n if (hq) {\n return store.cacheHQ.get(i)\n }\n return store.cache.get(i)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"apiEndpoint = apiSource === 'cafe'? 'https://xivapi-v2.xivcdn.com': 'https://v2.xivapi.com'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"function getIconPath(i) {\n const start = `${i - i%1000}`.padStart(6, \"0\");\n const icon = `${i}`.padStart(6, \"0\");\n const path = encodeURIComponent(\n `ui/icon/${start}/${icon}${hr ? \"_hr1\" : \"\"}.${format}`\n );\n return `${apiEndpoint}/api/asset?path=${path}&format=png`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"iconStartPadded = {\n return `${iconStart}`.padStart(6, '0')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"mutable generating = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"mutable processing = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"mutable outputSize = ({\n s20: '',\n s40: '',\n s80: '',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"mutable preview = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"mutable result = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"mutable errorsCount = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"mutable skiprest = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"url = {\n return {\n en: 'https://raw.githubusercontent.com/InfSein/ffxiv-datamining-mixed/master/en',\n cn: 'https://raw.githubusercontent.com/InfSein/ffxiv-datamining-mixed/master/chs',\n jp: 'https://raw.githubusercontent.com/InfSein/ffxiv-datamining-mixed/master/ja'\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import {parseCSV} from '25ec8057300114c3'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"mutable generatingZip = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"mutable generatedZip = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"mutable generatedPack = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"mutable dataTransfer = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"function dragOverHandler(ev) {\n // Prevent default behavior (Prevent file from being opened)\n ev.preventDefault();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"utils = {\n async function readDirectory(directory) {\n const dirReader = directory.createReader();\n const entries = [];\n \n while (true) {\n const results = await new Promise((resolve, reject) => {\n dirReader.readEntries(resolve, reject);\n });\n \n if (!results.length) {\n break;\n }\n \n for (const entry of results) {\n entries.push(entry);\n }\n }\n \n return entries;\n }\n function fileAsPromise(entry) {\n return new Promise((resolve, reject) => {\n entry.file(resolve, reject);\n });\n }\n\n return {\n readDirectory,\n fileAsPromise,\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"import {fflate} from '1fb134251c698a75'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"//viewof sourceRepo = Inputs.radio([\"en\", \"jp\", \"cn\"], {label: \"选择仓库\", value: \"cn\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"2","titling":"auto"}} 32:"$31:body"