@kabeersnetwork/rgba-by NPM

RGBA-by

Video and Image filter and color editing with Instagram-Inspired image filters

Install

yarn add @kabeersnetwork/rgba-by
# or
npm install @kabeersnetwork/rgba-by

Example

On existing canvas

import { clarendon, applyPresetOnCanvas } from '@kabeersnetwork/rgba-by';

const canvas = document.querySelector('#myCanvas');
applyPresetOnCanvas(canvas, clarendon());

On existing image

import { clarendon, applyPresetOnImage } from '@kabeersnetwork/rgba-by';

const image = document.querySelector('#myImage');
// Function `applyPresetOnImage` is returning a Blob
const blob = applyPresetOnImage(image, clarendon());

image.src = window.URL.createObjectURL(blob);

From URL

import { clarendon, applyPresetOnImageURL } from '@kabeersnetwork/rgba-by';
import myImage from './image.jpg';

// Function `applyPresetOnImage` is returning a Blob
const blob = applyPresetOnImage(myImage, clarendon());

const image = document.querySelector('#myImage');
image.src = window.URL.createObjectURL(blob);

Using preset of filters manually

import { clarendon } from '@kabeersnetwork/rgba-by';

const canvas = document.querySelector('#myCanvas');
const context = canvas.getContext('2d');
// Retrieve canvas pixels
const pixels = context.getImageData(0, 0, canvas.width, canvas.height);
// Transform canvas pixels with the "clarendon" filter
const filteredPixels = clarendon()(pixels);

// Replace pixels on the canvas
context.putImageData(filteredPixels, 0, 0);

Available presets

Clarendon
Gingham
Moon
Lark
Reyes
Juno
Slumber
Crema
Ludwig
Aden
Perpetua
Amaro
Mayfair
Rise
Hudson
Valencia
X-Pro II
Sierra
Willow
Lo-Fi
Inkwell
Hefe
Nashville
Stinson
Vesper
Earlybird
Brannan
Sutro
Toaster
Walden
1977
Kelvin
Maven
Ginza
Skyline
Dogpatch
Brooklyn
Helena
Ashby
Charmes

Mapping

A mapping of filter name -> filter function is exported as presetsMapping:

import { presetsMapping } from '@kabeersnetwork/rgba-by';

Raw filters

You can also use the raw filters directly like this:

import { sepia } from '@kabeersnetwork/rgba-by/lib/filters';

...

// Apply only sepia filter with a value of 0.5
const filteredPixels = sepia(0.5)(pixels);

...