pica-gpu

GPU accelerated image resizer

demo

---

Overview

Pica-gpu is a high-quality, GPU-accelerated image resizer inspired by 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:

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 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.