Pixels Library
Library for image web manipulation. Using the Pixels.js library (https://silvia-odwyer.github.io/pixels.js/)
Table of Contents
Installation
You can install the Pixels Image React Component using npm:
npm install node-pixels
or yarn:
yarn add node-pixels
Usage
Basic Use
import Pixels from 'node-pixels';
async function loadFilter(element) {
const canvas = document.createElement("canvas");
const source = await Pixels.getImageSource(element);
let { context, data } = await Pixels.drawImageSource(canvas, source);
await Pixels.adjustColors(data, {
brightness: 0.5,
saturation: 0.2,
contrast: -0.3
});
await Pixels.loadFilter(data, "coral");
await Pixels.applyChanges(data, context);
await Pixels.setVerticalFlip(canvas, context);
await Pixels.setHorizontalFlip(canvas, context);
element.src = canvas.toDataURL("image/png");
Pixels.reset(source, context);
element.src = canvas.toDataURL("image/png");
}
loadFilter(document.getElementById("my-image"));