{"id":13527331,"url":"https://github.com/lovasoa/bin2png","last_synced_at":"2025-03-24T04:31:21.860Z","repository":{"id":36463098,"uuid":"225345236","full_name":"lovasoa/bin2png","owner":"lovasoa","description":"Embed binary data inside an HTML file in an efficient way.","archived":false,"fork":false,"pushed_at":"2023-03-03T12:18:59.000Z","size":1854,"stargazers_count":42,"open_issues_count":4,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T12:11:33.487Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/bin2png","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lovasoa.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}},"created_at":"2019-12-02T10:16:07.000Z","updated_at":"2025-02-19T09:52:27.000Z","dependencies_parsed_at":"2024-01-13T21:40:43.410Z","dependency_job_id":"56c44d49-9850-4844-b9ae-829450858ab8","html_url":"https://github.com/lovasoa/bin2png","commit_stats":{"total_commits":76,"total_committers":4,"mean_commits":19.0,"dds":0.6052631578947368,"last_synced_commit":"d33309d8fd38959a7b8b458d83b9c15afaf2f1b6"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lovasoa%2Fbin2png","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lovasoa%2Fbin2png/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lovasoa%2Fbin2png/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lovasoa%2Fbin2png/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lovasoa","download_url":"https://codeload.github.com/lovasoa/bin2png/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245211104,"owners_count":20578349,"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":[],"created_at":"2024-08-01T06:01:45.888Z","updated_at":"2025-03-24T04:31:21.593Z","avatar_url":"https://github.com/lovasoa.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# bin2png\nEmbed binary data inside an HTML file in an efficient way.\n\nSometimes, your script requires some binary data that is available at compile time,\nand that you would like to inline in order to reduce the number of network roundtrips.\nYou could inline this data directly inside your script, as a `new Uint8Array([...])`,\nbut this would greatly increase your script's parse time, and the amount of data transferred.\nHere, we propose a better alternative: package the binary data as an inline PNG image. The browser can load the inline image without blocking the JavaScript code, and you benefit from the deflate compression provided by the PNG format.\n\n[![CI status](https://github.com/lovasoa/bin2png/workflows/Node%20CI/badge.svg)](https://github.com/lovasoa/bin2png/actions)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/7f568d67-7de0-45c8-b308-f6f84261f884/deploy-status)](https://app.netlify.com/sites/bin2png-example/deploys)\n[![png2bin minified bundle size](https://img.shields.io/bundlephobia/minzip/png2bin)](https://bundlephobia.com/result?p=png2bin)\n\n## How to use\n\nYou can see a full example of how to use `bin2png` and `png2bin` with an external build tool (in this case, parcel) in the [`example/`](./example/) folder. \n\n### Step 1: convert your binary files to png\n\nInstall **bin2png** in your dev dependencies (you only need it to build your html file):\n```\nnpm install --save-dev bin2png\n```\n\n#### Use the CLI tool\n\nYou can use the [bin2png](https://www.npmjs.com/package/bin2png) CLI tool that is provided with the npm package:\n\n```\nnpx bin2png file.bin encoded.png\n```\n\n#### Use the API\nFrom a build script, you can use:\n\n```js\nconst bin2png = require(\"bin2png\").bin2png;\n\n// bin2png takes an Uint8Array and returns another Uint8Array\nconst pngData = await bin2png(binaryData);\n```\n\n\n### Step 2: Use the png file\n\n\nAdd **png2bin** to your normal dependencies:\n\n```\nnpm install png2bin\n```\n\nThen use the `png2bin` function from the package to decode the image:\n\n#### In your HTML\n```html\n\u003cimg id=\"myfile\"\n    decoding=\"async\" loading=\"eager\"\n    style=\"display:none\"\n    src=\"data:image/png;base64,...\" /\u003e\n```\n\n#### In your JavaScript\n```js\nimport { png2bin } from \"png2bin\";\nconst img = document.getElementById(\"myfile\");\nconst mydata = await png2bin(img);\n// mydata is now an Uint8Array with the contents of the original file\n```\n\n## Compatibility\n\nSome browser privacy settings alter canvas pixels or prevent reading data from canvases altogether. \nThis is the case of the Tor browser and Brave when anti-tracking protections are activated.\nThis will prevent png2bin from working in these browsers.\nFor more information, see [brave/brave-browser#14421](https://github.com/brave/brave-browser/issues/14421).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flovasoa%2Fbin2png","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flovasoa%2Fbin2png","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flovasoa%2Fbin2png/lists"}