open-index/open-npm huggingface dataset:
npm package: @pixzle/browser
Description: Browser implementation of image fragmentation and restoration
Author: tuki0918
Latest version: 0.2.0

# @pixzle/browser

Browser implementation of Pixzle image restoration.

## Installation

```bash
npm i @pixzle/browser
```

## Usage

### Restore a single image

```typescript
import pixzle, { fetchManifest } from '@pixzle/browser';

const manifest = await fetchManifest('https://example.com/manifest.json');

const restoredBitmap = await pixzle.restoreImage({
  image: 'https://example.com/fragment.png', // or Blob, HTMLImageElement, ImageBitmap
  blockSize: manifest.config.blockSize,
  seed: manifest.config.seed,
  imageInfo: manifest.images[0],
});

// Draw to canvas
const canvas = document.createElement('canvas');
canvas.width = restoredBitmap.width;
canvas.height = restoredBitmap.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(restoredBitmap, 0, 0);
```

### Restore multiple images

```typescript
import pixzle from '@pixzle/browser';

const restoredBitmaps = await pixzle.restore({
  images: ['https://example.com/fragment1.png', 'https://example.com/fragment2.png'],
  manifest: 'https://example.com/manifest.json',
});

// Draw each restored image to canvas
restoredBitmaps.forEach((bitmap) => {
  const canvas = document.createElement('canvas');
  canvas.width = bitmap.width;
  canvas.height = bitmap.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0);
  document.body.appendChild(canvas);
});
```
npm package: @pixzle/node
Description: Node.js implementation of image fragmentation and restoration
Author: tuki0918
Latest version: 0.2.0

# @pixzle/node

Node.js implementation of image fragmentation and restoration.

## Installation

```bash
npm i @pixzle/node
```

## Usage

```ts
import pixzle from "@pixzle/node";
```

**Shuffle**

```ts
await pixzle.shuffle({
  // config: { /** FragmentationConfig */ },
  images: [
    "./input_1.png",
    "./input_2.png",
    "./input_3.png",
  ],
  outputDir: "./output/fragmented",
});
```

```
output
└── fragmented
    ├── img_1_fragmented.png
    ├── img_2_fragmented.png
    ├── img_3_fragmented.png
    └── manifest.json
```

<details>
<summary>Output:</summary>

| input 1 | input 2 | input 3 |
|:-------:|:---------------:|:---------------:|
| ![](../../.docs/input_sample.png) | ![](../../.docs/input_sample_mono.png) | ![](../../.docs/input_sample_blue.png) |
| 500 x 500px (109KB) | 400 x 600px (4KB) | 600 x 400px (3KB) |

| output 1 | output 2 | output 3 |
|:-------:|:---------------:|:---------------:|
| ![](../../.docs/fragmented1/img_1_fragmented.png) | ![](../../.docs/fragmented1/img_2_fragmented.png) | ![](../../.docs/fragmented1/img_3_fragmented.png) |
| 504 x 504px (159KB) | 496 x 488px (39KB) | 496 x 488px (35KB) |

</details>

----

**Restore**

```ts
await pixzle.restore({
  manifest: "./output/fragmented/manifest.json",
  images: [
    "./output/fragmented/img_1_fragmented.png",
    "./output/fragmented/img_2_fragmented.png",
    "./output/fragmented/img_3_fragmented.png",
  ],
  outputDir: "./output/restored",
});
```

```
output
└── restored
    ├── img_1.png
    ├── img_2.png
    └── img_3.png
```

<details>
<summary>Output:</summary>

| input 1 | input 2 | input 3 |
|:-------:|:---------------:|:---------------:|
| ![](../../.docs/fragmented1/img_1_fragmented.png) | ![](../../.docs/fragmented1/img_2_fragmented.png) | ![](../../.docs/fragmented1/img_3_fragmented.png) |
| 504 x 504px (159KB) | 496 x 488px (39KB) | 496 x 488px (35KB) |

| output 1 | output 2 | output 3 |
|:-------:|:---------------:|:---------------:|
| ![](../../.docs/restored1/img_1.png) | ![](../../.docs/restored1/img_2.png) | ![](../../.docs/restored1/img_3.png) |
| 500 x 500px (116KB) | 400 x 600px (2KB) | 600 x 400px (2KB) |

</details>
npm package: @pixzle/react
Description: React components for pixzle
Author: tuki0918
Latest version: 0.2.0

# @pixzle/react

React components for Pixzle.

For examples, see [Storybook](https://main--6933042708fdfa4c737476b2.chromatic.com/).

## Installation

```bash
npm i @pixzle/react
```

## Usage

### PixzleImage

```tsx
import { PixzleImage } from '@pixzle/react';
```

### Using manifest URL

```tsx
<PixzleImage
  manifest="https://example.com/manifest.json"
  image="https://example.com/fragment.png"
/>
```

### Using manifest URL with multiple images

```tsx
{/* #1 */}
<PixzleImage
  manifest="https://example.com/manifest.json"
  image="https://example.com/fragment1.png"
  // imageIndex={0}
/>

{/* #2 */}
<PixzleImage
  manifest="https://example.com/manifest.json"
  image="https://example.com/fragment2.png"
  imageIndex={1}
/>

{/* #3 */}
<PixzleImage
  manifest="https://example.com/manifest.json"
  image="https://example.com/fragment3.png"
  imageIndex={2}
/>
```

### Using manifest data
```tsx
<PixzleImage
  manifestData={manifestData}
  image="https://example.com/fragment.png"
/>
```

### Using explicit parameters
```tsx
<PixzleImage
  blockSize={2}
  seed="custom-seed"
  imageInfo={{ w: 500, h: 500 }}
  image="https://example.com/fragment.png"
/>
```