pica-gpu
Version:
**GPU accelerated image resizer**
75 lines (48 loc) • 2.68 kB
Markdown
# pica-gpu
**GPU accelerated image resizer**
[](https://www.npmjs.com/package/pica-gpu)
[](LICENSE)
[demo](https://pica-gpu.gezilinll.com/)
---
## Overview
Pica-gpu is a high-quality, **GPU-accelerated** image resizer inspired by [Pica](https://github.com/nodeca/pica). While Pica’s original implementation runs on the CPU using JavaScript, pica-gpu leverages **WebGL** to offload filtering and convolution tasks to the GPU. This results in dramatically reduced CPU load and memory usage with a performance improvement of **2-10x** – especially noticeable when processing large images.
Pica-gpu implements a full set of filtering algorithms (including mks2013 and others) on the GPU already.
---
## Features
- **GPU-accelerated image scaling**
Offloads per-pixel filtering operations to the GPU via WebGL.
- **High quality filters**
Supports advanced filters (e.g. mks2013) with excellent anti-moiré and sharpening effects.
- **Improved performance**
Achieves 2-10× speedup over CPU-based Pica, with higher gains on larger images.
- **Reduced CPU and memory usage**
Avoids creating extra buffers by performing operations on the GPU.
- **Simpler implementation**
Unlike Pica, pica-gpu does not need to handle complexities such as web workers; it only requires WebGL support.
- **Simple API**
Designed to be a drop-in alternative to Pica with a similar API surface.
## Installation
You can install pica-gpu via npm:
```bash
npm install pica-gpu
```
## Usage
```
import { resize } from 'pica-gpu'
resize(from, to,
{
filter,
targetWidth,
targetHeight,
})
```
## API
### .resize(from, to, options) -> void
Resize image from one canvas (or image) to another. Sizes are
taken from source and destination objects.
- **from** - source, can be `HTMLCanvasElement`, `HTMLImageElement`, `ImageBitmap` `ImageData`, `OffscreenCanvas`.
- **to** - destination canvas, its size is supposed to be non-zero.
- **options** - quality (number) or object:
- **filter** - filter name (Default - `mks2013`). See [resize_filter_info.js](https://github.com/gezilinll/pica-gpu/blob/master/lib/src/shaders.ts) for details. `mks2013` does both resize and sharpening, it's optimal and not recommended to change.
- **throw** When an error occurs, an exception containing the corresponding information will be thrown.
**(!)** Because the target canvas must use a WebGL context, no other context type should be requested on it in advance. Otherwise, an error may occur, preventing the resize from working properly.