trkbt10 / fisheye.ts

A javascript library for applying radial lens distortion to images using WebGL.

fisheye.ts

fisheye.ts is a javascript library for drawing images to the canvas with simple radial lens distortion using WebGL. This library was forked from https://github.com/ericleong/fisheye.js.

Visit trkbt10.github.io/fisheye.ts for a demo.

install

$ npm install [e-mail]:trkbt10/fisheye.ts.git

usage

Use it like this:

import { Fisheye } from 'fisheye'

const canvas: HTMLCanvasElement = document.createElement('canvas') || document.querySelector('canvas');
const image : HTMLImageElement  = document.createElement('img') || document.querySelector('image');
const fisheye = new Fisheyecanvas);

const [r,g,b] = [0,0,0];
fisheye.setDistortion(r,g,b);
fisheye.draw(image);

api

const fisheye = new Fisheye(canvas as HTMLCanvasElement);

<canvas> is an HTMLCanvasElement where the distorted image should be displayed.

fisheye.setDistortion(red as number, green as number, blue as number);

Each <value> is a number, use a positive value for barrel distortion and a negative value for pincushion distortion. If only the first argument is supplied, it is used for all colors. Use different amounts of distortion for each color channel to simulate chromatic aberration.

fisheye.draw(image as HTMLImageElement);

<image> is either an HTMLCanvasElement or an HTMLImageElement. It is the undistorted image.

fisheye.setViewport(width as number, height as number);

If the canvas size is changed, update the viewport size with this method.

fisheye.clear();

When drawing a new image, you may need to call clear() to clear the existing canvas.