{"id":127,"date":"2026-07-30T00:05:04","date_gmt":"2026-07-30T08:05:04","guid":{"rendered":"https:\/\/oou.tw\/?p=127"},"modified":"2026-07-30T01:04:13","modified_gmt":"2026-07-30T09:04:13","slug":"apng","status":"publish","type":"post","link":"https:\/\/oou.tw\/index.php\/2026\/07\/30\/apng\/","title":{"rendered":"\u6703\u52d5\u7684PNG"},"content":{"rendered":"\n

pngToApng or gifToApng \u8f49\u52d5\u5716png<\/p>\n\n\n\n

\u56e0\u70ba\u592a\u9177\u5566\uff0c\u6240\u4ee5\u5c31\u5617\u8a66\u88fd\u4f5c\u770b\u770b<\/p>\n\n\n\n

\u5c0d\u65bc\u7406\u89e3\u5716\u6a94\u4fdd\u5b58\u7d50\u69cb\u8ddf\u65b9\u5f0f\u4e5f\u5f88\u6709\u5e6b\u52a9\uff01<\/p>\n\n\n\n

Github:https:\/\/github.com\/firekilin\/png-To-Apng<\/a><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

pngToApng<\/h1>\n\n\n\n
  let demo = require ('.\/dist\/index');\n  \/\/pngToApng RGBA\n  demo.pngToApngRGBA (pngImgBuffer).then (data => {\n    fs.writeFileSync ('.\/output\/output1.png', data);\n  });\n\n  \/\/pngToApng PLTE\n  demo.pngToApngPLTE (pngImgBuffer).then (data => {\n    fs.writeFileSync ('.\/output\/output2.png', data);\n  });\n<\/code><\/pre>\n\n\n\n
gifToApng<\/h1>\n\n\n\n
  let demo = require ('.\/dist\/index');\n  \/\/pngToApng RGBA\n  demo.pngToApngRGBA (pngImgBuffer).then (data => {\n    fs.writeFileSync ('.\/output\/output1.png', data);\n  });\n\n  \/\/pngToApng PLTE\n  demo.pngToApngPLTE (pngImgBuffer).then (data => {\n    fs.writeFileSync ('.\/output\/output2.png', data);\n  });\n<\/code><\/pre>\n\n\n\n
option<\/h1>\n\n\n\n
  \/*  option\n {\n    allDelayNum:null, \/\/\u5982\u679c\u6709\u503c \u7d71\u4e00\u79d2\u6578 x\/100 \u79d2\n    allBlendOp:null, \/\/\u5982\u679c\u6709\u503c \u7d71\u4e00\u6df7\u8272\n    bitDepth: 8, \/\/ \u984f\u8272\u6df1\u5ea6\n    colorType: 6, \/\/ \u984f\u8272\u985e\u578b\n    compressionMethod: 0, \/\/ \u58d3\u7e2e\u65b9\u6cd5\n    filterMethod: 0, \/\/ \u6ffe\u6ce2\u5668\n    interlaceMethod: 0, \/\/ \u9694\u884c\u6383\u63cf\u65b9\u5f0f\n    numPlays: 0, \/\/ \u8a2d\u5b9a\u5faa\u74b0\u6b21\u6578 0\u70ba\u7121\u9650\u6b21\n    fc: [{\n      xOffset: 0, \/\/ X \u504f\u79fb\n      yOffset: 0, \/\/ Y \u504f\u79fb\n      delayNum: 20, \/\/ \u5ef6\u9072\u6642\u9593\u5206\u5b50 \u55ae\u7368\u8a2d\u5b9a\u53ef\u84cb\u904e \u7d71\u4e00\u79d2\u6578\n      delayDen: 100, \/\/ \u5ef6\u9072\u6642\u9593\u5206\u6bcd \u55ae\u7368\u8a2d\u5b9a\u53ef\u84cb\u904e \u7d71\u4e00\u79d2\u6578\n      disposeOp: 0, \/\/ Dispose \u64cd\u4f5c 0\u4e0d\u9032\u884c\u8655\u7406 1\u5b8c\u5168\u6e05\u9664 2 \u6e32\u67d3\u56de\u4e0a\u4e00\u500b\n      blendOp: 0, \/\/ Blend \u64cd\u4f5c 0\u8986\u84cb\u6240\u6709\u984f\u8272  1\u6df7\u548c\u984f\u8272  \u55ae\u7368\u8a2d\u5b9a\u53ef\u84cb\u904e \u7d71\u4e00\u6df7\u8272\n    }]\n  }\n  *\/\n  \/\/gifToApng RGBA\n  demo.gifToApngRGBA (gifImgBuffer, \n    { 'numPlays': 5,\n      'fc': [\n        { 'delayNum': 10, 'delayDen': 100 },\n        { 'delayNum': 20, 'delayDen': 100 }\n      ] })\n    .then (data => {\n      fs.writeFileSync ('.\/output\/output5.png', data);\n    });\n<\/code><\/pre>\n\n\n\n
\u539f\u7406\u8aaa\u660e PNG cunk \u9806\u5e8f  \u500b\u4eba\u7b46\u8a18<\/h1>\n\n\n\n
png\n    pngSignature \n    IHDR\n    IDAT \n<\/code><\/pre>\n\n\n\n
pngSignature \u56fa\u5b9a PNG\u985e\u578b<\/h1>\n\n\n\n
89 50 4E 47 0D 0A 1A 0A\n<\/code><\/pre>\n\n\n\n
cunk \u56fa\u5b9a\u683c\u5f0f \u9664pngSignature\u5916<\/h1>\n\n\n\n
byte(size)\n    4   length \u5167\u5bb9\u9577\u5ea6\n    4   type   cunk \u985e\u578b\u540d\u7a31 (IHDR\u3001IDAT....)\n    x   content \u8cc7\u6599\u5167\u5bb9\n    4   CRC    CRC32(type + content)\n<\/code><\/pre>\n\n\n\n
IHDR Cunk \u5716\u7247\u57fa\u672c\u8cc7\u8a0a<\/h1>\n\n\n\n
byte\n    0   width    \u5bec\u5ea6\n    4   height    \u9ad8\u5ea6\n    8   bitDepth    \u984f\u8272\u6df1\u5ea6 \u901a\u5e388\n    9   colorType    \u984f\u8272\u985e\u578b \u901a\u5e38 6\uff08\u771f\u5f69\u8272\uff09 APNG PLTE \u9700\u70ba 3\n    10  compressionMethod    \u58d3\u7e2e\u65b9\u6cd5\n    11  filterMethod    \u6ffe\u6ce2\u5668\n    12  filterinterlaceMethodMethod    \u9694\u884c\u6383\u63cf\u65b9\u5f0f\n<\/code><\/pre>\n\n\n\n
IDAT Cunk \u5716\u7247\u5167\u5bb9<\/h1>\n\n\n\n
byte\n    0   \u5716\u7247\u8cc7\u8a0a\n\n\/\/ \u52a0\u5bc6\u8cc7\u6599 \u4f7f\u7528pngjs\u89e3\u51fa\u70ba\n\/\/ 00000000 00000000 00000000 \u9019\u6a23\u70ba\u4e09\u9ede\u9663 RGBA  \u7121Flitering\n<\/code><\/pre>\n\n\n\n
\u539f\u7406\u8aaa\u660e APNG cunk \u9806\u5e8f<\/h1>\n\n\n\n
apng\n    pngSignature\n        89 50 4E 47 0D 0A 1A 0A\n    IHDR\n        \u5bec\u5ea6\n        \u9ad8\u5ea6\n        \u6df1\u5ea6\n        \u58d3\u7e2e\u65b9\u6cd5\n        \u6ffe\u6ce2\u5668\u65b9\u6cd5\n        \u9694\u884c\u6383\u63cf\u65b9\u5f0f\n    acTL\n        \u5e40\u6578\n        \u64ad\u653e\u6b21\u6578 0\u7121\u9650\u6b21\n    PLTE\n        \u984f\u8272 \u8272\u7968\n    tRNS\n        \u900f\u660e\u5ea6 (\u4e0d\u6e05\u695a\n    fcTL\n        \u5e8f\u865f\n        X \u504f\u79fb\n        Y \u504f\u79fb\n        \u5ef6\u9072\u6642\u9593\u5206\u5b50\n        \u5ef6\u9072\u6642\u9593\u5206\u6bcd\n        Dispose \u64cd\u4f5c    0\u4e0d\u9032\u884c\u8655\u7406 1\u5b8c\u5168\u6e05\u9664 2 \u6e32\u67d3\u56de\u4e0a\u4e00\u500b\n        Blend \u64cd\u4f5c        0\u8986\u84cb\u6240\u6709\u984f\u8272  1\u6df7\u548c\u984f\u8272\n    IDAT\n        \u4f7f\u7528zlib\u89e3\u51fa\n        01 00000000 00000000 00000000 \u9019\u6a23\u70ba\u4e09\u9ede\u9663 \u524d\u9762\u70ba\u63db\u884c\u6642\u8cc7\u8a0a\n            Type    Name    Filter Function    Reconstruction Function\n            0    None    Filt(x) = Orig(x)    Recon(x) = Filt(x)\n            1    Sub    Filt(x) = Orig(x) - Orig(a)    Recon(x) = Filt(x) + Recon(a) \u5de6\u5074\n            2    Up    Filt(x) = Orig(x) - Orig(b)    Recon(x) = Filt(x) + Recon(b) \u4e0a\u65b9\n            3    Average    Filt(x) = Orig(x) - floor((Orig(a) + Orig(b)) \/ 2)    Recon(x) = Filt(x) + floor((Recon(a) + Recon(b)) \/ 2)\n            4    Paeth    Filt(x) = Orig(x) - PaethPredictor(Orig(a), Orig(b), Orig(c))    Recon(x) = Filt(x) + PaethPredictor(Recon(a), Recon(b), Recon(c))\n    fcTL\n    fdAT(IDAT)\n    fcTL\n    fdAT(IDAT)\n    ....\n<\/code><\/pre>\n\n\n\n
\u6211\u4f7f\u7528\u7684PLTE\u65b9\u5f0f<\/h1>\n\n\n\n
\u5c07\u6bcf\u5f35 png \u89e3\u6790\u51fa\u4f86\n\n\u8209\u4f8b\n\u4e00\u5f351*5\u7684\u9ede\u9663\u5716\n\u4e00\u822c\u9ede\u9663\u65b9\u5f0f\u70ba\n\u9ede\u9663\u8cc7\u8a0a\nff0000ff ff0000ff ffff00ff ffffffff ffff0008\n\n\u8f49\u70baPLTE+trn\n\nPLTE\nffff00\nff0000\nffff00\nffffff\n\ntRNS\n08\n\n\u76ee\u524d\u7121\u4f7f\u7528filtering\n\u9ede\u9663\u8cc7\u8a0a\u5c07\u70ba\n00 01 01 02 03 00\n\n<\/code><\/pre>\n\n\n\n
filtering<\/h1>\n\n\n\n
\n\u4f7f\u7528filter\u65b9\u5f0f\u9032\u884c\u5132\u5b58\u5716\u7247\n\u4f7f\u752801 \u53ca 02 \u53ca 04\n\u4f9d\u7167\u4e0a\u65b9\u984f\u8272 \u6216 \u5de6\u65b9\u984f\u8272 \u6216 \u5de6\u4e0a\u984f\u8272 \u9032\u884c\u8655\u7406  03 \u904e\u65bc\u8907\u96dc \u4e0d\u9032\u884c\u8655\u7406\n<\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
pngToApng or gifToApng \u8f49\u52d5\u5716png \u56e0\u70ba\u592a\u9177\u5566\uff0c\u6240\u4ee5\u5c31\u5617\u8a66\u88fd\u4f5c\u770b\u770b \u5c0d\u65bc\u7406\u89e3\u5716\u6a94\u4fdd\u5b58\u7d50 […]<\/p>\n","protected":false},"author":1,"featured_media":137,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[6,5],"tags":[],"class_list":["post-127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-playground","category-note"],"blocksy_meta":[],"uagb_featured_image_src":{"full":["https:\/\/oou.tw\/wp-content\/uploads\/2026\/07\/output1.png",130,120,false],"thumbnail":["https:\/\/oou.tw\/wp-content\/uploads\/2026\/07\/output1.png",130,120,false],"medium":["https:\/\/oou.tw\/wp-content\/uploads\/2026\/07\/output1.png",130,120,false],"medium_large":["https:\/\/oou.tw\/wp-content\/uploads\/2026\/07\/output1.png",130,120,false],"large":["https:\/\/oou.tw\/wp-content\/uploads\/2026\/07\/output1.png",130,120,false],"1536x1536":["https:\/\/oou.tw\/wp-content\/uploads\/2026\/07\/output1.png",130,120,false],"2048x2048":["https:\/\/oou.tw\/wp-content\/uploads\/2026\/07\/output1.png",130,120,false]},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/oou.tw\/index.php\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"pngToApng or gifToApng \u8f49\u52d5\u5716png \u56e0\u70ba\u592a\u9177\u5566\uff0c\u6240\u4ee5\u5c31\u5617\u8a66\u88fd\u4f5c\u770b\u770b \u5c0d\u65bc\u7406\u89e3\u5716\u6a94\u4fdd\u5b58\u7d50...","_links":{"self":[{"href":"https:\/\/oou.tw\/index.php\/wp-json\/wp\/v2\/posts\/127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oou.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oou.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oou.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oou.tw\/index.php\/wp-json\/wp\/v2\/comments?post=127"}],"version-history":[{"count":5,"href":"https:\/\/oou.tw\/index.php\/wp-json\/wp\/v2\/posts\/127\/revisions"}],"predecessor-version":[{"id":147,"href":"https:\/\/oou.tw\/index.php\/wp-json\/wp\/v2\/posts\/127\/revisions\/147"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oou.tw\/index.php\/wp-json\/wp\/v2\/media\/137"}],"wp:attachment":[{"href":"https:\/\/oou.tw\/index.php\/wp-json\/wp\/v2\/media?parent=127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oou.tw\/index.php\/wp-json\/wp\/v2\/categories?post=127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oou.tw\/index.php\/wp-json\/wp\/v2\/tags?post=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}