https://github.com/lovasoa/bin2png
Embed binary data inside an HTML file in an efficient way.
https://github.com/lovasoa/bin2png
Last synced: 10 months ago
JSON representation
Embed binary data inside an HTML file in an efficient way.
- Host: GitHub
- URL: https://github.com/lovasoa/bin2png
- Owner: lovasoa
- License: lgpl-3.0
- Created: 2019-12-02T10:16:07.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T12:18:59.000Z (almost 3 years ago)
- Last Synced: 2025-03-18T12:11:33.487Z (10 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/bin2png
- Size: 1.77 MB
- Stars: 42
- Watchers: 2
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# bin2png
Embed binary data inside an HTML file in an efficient way.
Sometimes, your script requires some binary data that is available at compile time,
and that you would like to inline in order to reduce the number of network roundtrips.
You could inline this data directly inside your script, as a `new Uint8Array([...])`,
but this would greatly increase your script's parse time, and the amount of data transferred.
Here, 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.
[](https://github.com/lovasoa/bin2png/actions)
[](https://app.netlify.com/sites/bin2png-example/deploys)
[](https://bundlephobia.com/result?p=png2bin)
## How to use
You 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.
### Step 1: convert your binary files to png
Install **bin2png** in your dev dependencies (you only need it to build your html file):
```
npm install --save-dev bin2png
```
#### Use the CLI tool
You can use the [bin2png](https://www.npmjs.com/package/bin2png) CLI tool that is provided with the npm package:
```
npx bin2png file.bin encoded.png
```
#### Use the API
From a build script, you can use:
```js
const bin2png = require("bin2png").bin2png;
// bin2png takes an Uint8Array and returns another Uint8Array
const pngData = await bin2png(binaryData);
```
### Step 2: Use the png file
Add **png2bin** to your normal dependencies:
```
npm install png2bin
```
Then use the `png2bin` function from the package to decode the image:
#### In your HTML
```html
```
#### In your JavaScript
```js
import { png2bin } from "png2bin";
const img = document.getElementById("myfile");
const mydata = await png2bin(img);
// mydata is now an Uint8Array with the contents of the original file
```
## Compatibility
Some browser privacy settings alter canvas pixels or prevent reading data from canvases altogether.
This is the case of the Tor browser and Brave when anti-tracking protections are activated.
This will prevent png2bin from working in these browsers.
For more information, see [brave/brave-browser#14421](https://github.com/brave/brave-browser/issues/14421).