{"_id":"@upng/upng-js","_rev":"2-45a403b5664ac749fd4b24297f7b357a","name":"@upng/upng-js","dist-tags":{"latest":"2.2.2"},"versions":{"2.2.1":{"name":"@upng/upng-js","version":"2.2.1","keywords":["png","apng","image","conversion"],"author":{"url":"https://github.com/photopea","name":"photopea"},"license":"MIT","_id":"@upng/upng-js@2.2.1","maintainers":[{"name":"webliang","email":"mengxianliang7706@gmail.com"}],"contributors":[{"url":"https://github.com/Scimonster","name":"Scimonster"}],"homepage":"https://github.com/photopea/UPNG.js","bugs":{"url":"https://github.com/photopea/UPNG.js/issues"},"dist":{"shasum":"d984d969c7ef3dd5a289a9165992fb01ece35355","tarball":"https://registry.npmjs.org/@upng/upng-js/-/upng-js-2.2.1.tgz","fileCount":6,"integrity":"sha512-7dEYK5LUacSfdG1cPGoxgn33ir2oDB0RHG+8z1gQT5qyfZbRY52aUwDKJrCVvf7McSh4684JFod5Zy25FJXbsQ==","signatures":[{"sig":"MEUCIETuf6eQ9GHlt5zEtIzNZRkbct3JApNVcyNWP71zJawyAiEAoTiOpyx1KA98KGwvkYBgGQrsaxowpScApzaSFV0rdZc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":156962},"main":"dist/UPNG.cjs.js","type":"module","module":"dist/UPNG.esm.js","browser":"dist/UPNG.umd.js","gitHead":"e85e455c2cc0021e8294debe823c88035402144f","scripts":{"dev":"rollup -c -w","test":"node test/test.js","build":"rollup -c","pretest":"npm run build"},"_npmUser":{"name":"webliang","email":"mengxianliang7706@gmail.com"},"repository":{"url":"git+https://github.com/photopea/UPNG.js.git"},"_npmVersion":"10.5.0","description":"Small, fast and advanced PNG / APNG encoder and decoder","directories":{},"_nodeVersion":"20.12.2","dependencies":{"pako":"^2.1.0"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.38.0","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-commonjs":"^28.0.3","@rollup/plugin-node-resolve":"^16.0.1"},"_npmOperationalInternal":{"tmp":"tmp/upng-js_2.2.1_1743593078491_0.1902464452756436","host":"s3://npm-registry-packages-npm-production"}},"2.2.2":{"name":"@upng/upng-js","description":"Small, fast and advanced PNG / APNG encoder and decoder","version":"2.2.2","main":"dist/UPNG.cjs.js","module":"dist/UPNG.esm.js","browser":"dist/UPNG.umd.js","homepage":"https://github.com/webLiang/UPNG.js","author":{"name":"webLiang","url":"https://github.com/webLiang"},"contributors":[{"name":"photopea","url":"https://github.com/photopea"},{"name":"Scimonster","url":"https://github.com/Scimonster"}],"license":"MIT","repository":{"url":"git+https://github.com/webLiang/UPNG.js.git"},"bugs":{"url":"https://github.com/webLiang/UPNG.js/issues"},"keywords":["png","apng","image","conversion"],"dependencies":{"pako":"^2.1.0"},"devDependencies":{"@rollup/plugin-commonjs":"^28.0.3","@rollup/plugin-node-resolve":"^16.0.1","@rollup/plugin-terser":"^0.4.4","rollup":"^4.38.0"},"type":"module","scripts":{"build":"rollup -c","dev":"rollup -c -w","test":"node test/test.js","pretest":"npm run build"},"_id":"@upng/upng-js@2.2.2","gitHead":"ceb36b0bd534f91045963faf202ca213bf1cdc4a","_nodeVersion":"20.12.2","_npmVersion":"10.5.0","dist":{"integrity":"sha512-Z+sYAXP8ndbwXpyBj+jszsxS7kmstsiCOSfwzJ5qyqQwEuSZ0OZBn7x52hzhy1btQoZck3PXxWNsGDAs8Bsw7g==","shasum":"a5c8c76812f04a086a8bc33c00b536d04f919a7e","tarball":"https://registry.npmjs.org/@upng/upng-js/-/upng-js-2.2.2.tgz","fileCount":7,"unpackedSize":162727,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHOpvxoHQTZ0uvlY3DHxlMLHJpQ3EcOjaAZd2M9hHqm6AiEA+8s/ARuOaXt4Sjia3b8IgQ1s4gETuMuB0SYxAvShOPE="}]},"_npmUser":{"name":"webliang","email":"mengxianliang7706@gmail.com"},"directories":{},"maintainers":[{"name":"webliang","email":"mengxianliang7706@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/upng-js_2.2.2_1744185432694_0.1550156354115697"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-02T11:24:38.386Z","modified":"2025-04-09T07:57:13.106Z","2.2.1":"2025-04-02T11:24:38.709Z","2.2.2":"2025-04-09T07:57:12.948Z"},"bugs":{"url":"https://github.com/webLiang/UPNG.js/issues"},"author":{"name":"webLiang","url":"https://github.com/webLiang"},"license":"MIT","homepage":"https://github.com/webLiang/UPNG.js","keywords":["png","apng","image","conversion"],"repository":{"url":"git+https://github.com/webLiang/UPNG.js.git"},"description":"Small, fast and advanced PNG / APNG encoder and decoder","contributors":[{"name":"photopea","url":"https://github.com/photopea"},{"name":"Scimonster","url":"https://github.com/Scimonster"}],"maintainers":[{"name":"webliang","email":"mengxianliang7706@gmail.com"}],"readme":"# UPNG.js\nA small, fast and advanced PNG / APNG encoder and decoder. It is the main PNG engine for [Photopea image editor](https://www.photopea.com).、\n\nThis project is a fork of UPNG.js . The maintainer of the original repo does not publish it to NPM. \n**Supports multiple output js formats**\n\"main\": \"dist/UPNG.cjs.js\"\n\"module\": \"dist/UPNG.esm.js\" \n\"browser\": \"dist/UPNG.umd.js\"\n**and upgrades \"pako\": \"^2.1.0\" and simplifies reference on demand.**\nimport { deflate } from 'pako/lib/deflate.js';\n\n**To install the latest stable version:**\n# With npm\nnpm install --save @upng/upng-js\n\n# With yarn\nyarn add @upng/upng-js\n\nUMD Module\nYou can also download @upng/upng-js as a UMD module from unpkg. The UMD builds have been compiled to ES5, so they should work in any modern browser. UMD builds are useful if you aren't using a package manager or module bundler. For example, you can use them directly in the <script> tag of an HTML page.\n\nThe following builds are available:\n\nhttps://unpkg.com/@upng/upng-js/dist/UPNG.umd.js\nWhen using a UMD build, you will have access to a global window.UPNG variable. This variable contains the UPNG class exported by @upng/upng-js. For example:\n\n// NPM module\nimport UPNG from '@upng/upng-js';\nconst pngImage = UPNG.decode(/* ... */)\n\n// UMD module\nvar pngImage = window.UPNG.decode(/* ... */)\n\n* [Examples of PNGs minified by UPNG.js](https://blog.photopea.com/png-minifier-inside-photopea.html#examples)\n* [Try UPNG.js in Photopea](https://www.photopea.com) - open an image and press File - Save for web, play with the Quality\n* [UPNG.Photopea.com](http://upng.photopea.com) - a separate minifier app, that uses UPNG.js\n* Support us by [making a donation](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=ivan%40kuckir%2ecom&lc=CZ&item_name=UPNG%2ejs&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted).\n\nDownload and include the `UPNG.js` file in your code.\n\nimport UPNG from \"@upng/upng-js\";\n\n## Encoder\n\nUPNG.js supports APNG and the interface expects \"frames\". Regular PNG is just a single-frame animation (single-item array).\n\n#### `UPNG.encode(imgs, w, h, cnum, [dels])`\n* `imgs`: array of frames. A frame is an ArrayBuffer containing the pixel data (RGBA, 8 bits per channel)\n* `w`, `h` : width and height of the image\n* `cnum`: number of colors in the result;  0: all colors (lossless PNG)\n* `dels`: array of millisecond delays for each frame (only when 2 or more frames)\n* returns an ArrayBuffer with binary data of a PNG file\n\nUPNG.js can do a lossy minification of PNG files, similar to [TinyPNG](https://tinypng.com/) and other tools. It performed quantization with [k-means algorithm](https://en.wikipedia.org/wiki/K-means_clustering) in the past, but now we use [K-d trees](https://en.wikipedia.org/wiki/K-d_tree).\n\nLossy compression is allowed by the last parameter `cnum`. Set it to zero for a lossless compression, or write the number of allowed colors in the image. Smaller values produce smaller files. **Or just use 0 for lossless / 256 for lossy.**\n\n    // Read RGBA from canvas and encode with UPNG\n    var dta = ctx.getImageData(0,0,200,300).data;  // ctx is Context2D of a Canvas\n    //  dta = new Uint8Array(200 * 300 * 4);       // or generate pixels manually\n    var png = UPNG.encode([dta.buffer], 200, 300, 0);   console.log(new Uint8Array(png));\n\n#### `UPNG.encodeLL(imgs, w, h, cc, ac, depth, [dels])` - low-level encode\n* `imgs`: array of frames. A frame is an ArrayBuffer containing the pixel data (corresponding to following parameters)\n* `w`, `h` : width and height of the image\n* `cc`, `ac`: number of color channels (1 or 3) and alpha channels (0 or 1)\n* `depth`: bit depth of pixel data (1, 2, 4, 8, 16)\n* `dels`: array of millisecond delays for each frame (only when 2 or more frames)\n* returns an ArrayBuffer with binary data of a PNG file\n\nThis function does not do any optimizations, it just stores what you give it. There are two cases when it is useful:\n* saving 16-bit colors (note, that PNG is big-endian, unlike Uint16Array in JS)\n* your image is too large, and \"expanding\" to 8-bit RGBA would use too much memory (e.g. 4-bit grayscale 50,000 x 50,000 = 1.25 GB, 8-bit RGBA would be 10 GB)\n\n## Decoder\n\nSupports all color types (including Grayscale and Palettes), all channel depths (1, 2, 4, 8, 16), interlaced images etc. Opens PNGs which other libraries can not open (tested with [PngSuite](http://www.schaik.com/pngsuite/)).\n\n#### `UPNG.decode(buffer)`\n* `buffer`: ArrayBuffer containing the PNG file\n* returns an image object with following properties:\n* * `width`: the width of the image\n* * `height`: the height of the image\n* * `depth`: number of bits per channel\n* * `ctype`: color type of the file (Truecolor, Grayscale, Palette ...)\n* * `frames`: additional info about frames (frame delays etc.)\n* * `tabs`: additional chunks of the PNG file\n* * `data`: pixel data of the image\n\nPNG files may have a various number of channels and a various color depth. The interpretation of `data` depends on the current color type and color depth (see the [PNG specification](https://www.w3.org/TR/PNG/)).\n\n#### `UPNG.toRGBA8(img)`\n* `img`: PNG image object (returned by UPNG.decode())\n* returns an array of frames. A frame is ArrayBuffer of the image in RGBA format, 8 bits per channel.\n\n### Example\n    var img  = UPNG.decode(buff);        // put ArrayBuffer of the PNG file into UPNG.decode\n    var rgba = UPNG.toRGBA8(img)[0];     // UPNG.toRGBA8 returns array of frames, size: width * height * 4 bytes.\n\nPNG format uses the Inflate algorithm. Right now, UPNG.js calls [Pako.js](https://github.com/nodeca/pako) for the Inflate and Deflate method.\n\n## Quantizer\n\nUPNG.js contains a very good Quantizer of 4-component 8-bit vectors (i.e. pixels). It can be used to generate nice color palettes (e.g. Photopea uses UPNG.js to make palettes for GIF images).\n\nQuantization consists of two important steps: Finding a nice palette and Finding the closest color in the palette for each sample (non-trivial for large palettes). UPNG perfroms both steps.\n\n    var res  = UPNG.quantize(data, psize);\n\n* `data`: ArrayBuffer of samples (byte length is a multiple of four)\n* `psize` : Palette size (how many colors you want to have)\n\nThe result object \"res\" has following properties:\n\n* `abuf`: ArrayBuffer corresponding to `data`, where colors are remapped by a palette\n* `inds`: Uint8Array : the index of a color for each sample (only when `psize`<=256)\n* `plte`: Array : the Palette - a list of colors, `plte[i].est.q` and `plte[i].est.rgba` is the color value\n\n### FAQ\n\n- To get one common palette for multiple images (e.g. frames of the animation), concatenate them into one array `data`.\n- When working with less than four components, set the remaining components to a constant value (e.g. to zero)\n- When working with transparency, premultiply color components by transparency (otherwise, rgba(1,1,1,0) would be closer to rgba(1,1,1,1) than to rgba(0,0,0,0) - transparent mapped to white instead of transparent)\n","readmeFilename":"README.md"}