{"id":16040994,"url":"https://github.com/eliot-akira/png-compressor","last_synced_at":"2025-03-17T21:31:05.078Z","repository":{"id":188331441,"uuid":"678548033","full_name":"eliot-akira/png-compressor","owner":"eliot-akira","description":"Compress and encode data as PNG image","archived":false,"fork":false,"pushed_at":"2024-01-14T19:15:58.000Z","size":420,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-03-15T02:47:33.654Z","etag":null,"topics":["cartridge","data","gzip","png"],"latest_commit_sha":null,"homepage":"https://eliot-akira.github.io/png-compressor/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eliot-akira.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-14T20:09:36.000Z","updated_at":"2024-01-13T02:48:21.000Z","dependencies_parsed_at":"2023-12-31T20:25:17.290Z","dependency_job_id":"b53574bb-3e89-47cc-9763-585009976222","html_url":"https://github.com/eliot-akira/png-compressor","commit_stats":null,"previous_names":["eliot-akira/png-compressor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eliot-akira%2Fpng-compressor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eliot-akira%2Fpng-compressor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eliot-akira%2Fpng-compressor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eliot-akira%2Fpng-compressor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eliot-akira","download_url":"https://codeload.github.com/eliot-akira/png-compressor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221700741,"owners_count":16866114,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cartridge","data","gzip","png"],"created_at":"2024-10-08T23:22:58.218Z","updated_at":"2024-10-27T15:48:44.658Z","avatar_url":"https://github.com/eliot-akira.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PNG Compressor\n\n\u003e Compress and encode data as Portable Network Graphics (PNG) image\n\n![](screenshot.jpg)\n\n#### [Demo](https://eliot-akira.github.io/png-compressor/) · [API](https://eliot-akira.github.io/png-compressor/api/) · [Source](https://github.com/eliot-akira/png-compressor)\n\n## Why\n\nIt can be useful to encode data or application state into an image file for sharing easily - compared to JSON or ZIP format, which might not be possible to upload to a discussion forum.\n\nSuch images are sometimes called \"cartridges\", referring to retro game ROM cards.\n\n## How\n\nThe data is `gzip` compressed using the [Compression Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API), well-supported by browsers and server-side JavaScript runtimes. The PNG format uses the same algorithm, but I found that the compression ratio is dramatically better when the data is compressed before encoding as image.\n\nEach byte of the given data is written into the color channels (red/green/blue) of an image. The opacity (alpha) channel is not used because it can change color values.\n\nIn the browser, this encoded buffer can be turned into an image element and downloaded as a PNG file. On the server, it can be written to a file.\n\n## Install\n\n```sh\nnpm install --save png-compressor\n```\n\n## Usage\n\n### Encode/decode JSON-serializable value\n\n```ts\nimport { encode, decode } from 'png-compressor'\n\nconst object = { key: 'value' }\n\nconst pngImage = await encode(object)\nconst decoded =  await decode(pngImage)\n\nassert.deepEqual(decoded, object)\n```\n\n### Encode/decode binary (array buffer)\n\n```ts\nimport { encodeBinary, decodeBinary } from 'png-compressor'\n\nconst buffer = new ArrayBuffer(8)\n\nconst pngImage = await encodeBinary(buffer)\nconst decoded =  await decodeBinary(pngImage)\n\nassert.deepEqual(decoded, buffer)\n```\n\n## Browser\n\n### Create image element\n\n```ts\nimport * as png from 'png-compressor'\n\nconst object = { key: 'value' }\n\nconst image = await png.encodeToImage(object)\n```\n\nOr pass an image element as second argument to render into it.\n\n```ts\nconst image = document.createElement('img')\n\nawait png.encodeToImage(object, image)\n```\n\n### Download as image\n\n```ts\nconst blob = await png.encodeToBlob(object)\n\npng.downloadImage(blob, 'example.png')\n```\n\n## Server (Node.js)\n\n### Write to image file\n\n```ts\nimport fs from 'node:fs/promises'\nimport * as png from 'png-compressor'\n\nconst object = { key: 'value' }\n\nconst encoded = await png.encode(source)\nawait fs.writeFile('test.png', Buffer.from(encoded))\n```\n\n### Read from image file\n\n```ts\nconst buffer = await fs.readFile('test.png')\nconst decoded = await png.decode(buffer.buffer)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feliot-akira%2Fpng-compressor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feliot-akira%2Fpng-compressor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feliot-akira%2Fpng-compressor/lists"}