Pixels Image React Component

A React component for applying filters to images using the Pixels.js library (https://silvia-odwyer.github.io/pixels.js/)

Demo

Check out the CodeSandbox Demo to see the Pixels Image React Component in action!

Table of Contents

• Installation
• Usage

Installation

You can install the Pixels Image React Component using npm:

npm install react-pixels

or yarn:

yarn add react-pixels

Usage

Apply Pixels.js Filters

import React from 'react';
import { PixelsImage } from 'react-pixels';

function App() {
  return (
    <div>
      <h1>Pixels Image React Component</h1>
      <PixelsImage
        src="path/to/your/image.jpg"
        filter="greyscale" // or ["greyscale", ...] to apply more than one filter
      />
    </div>
  );
}

export default App;

Edit saturation, brightness, contrast

import React from 'react';
import { PixelsImage } from 'react-pixels';

function App() {
  return (
    <div>
      <h1>Pixels Image React Component</h1>
      <PixelsImage
        src="path/to/your/image.jpg"
        saturation={0.5} // -1 to 1 (-100% to 100%)
        brightness={1} // -1 to 1 (-100% to 100%)
        contrast={-0.2} // -1 to 1 (-100% to 100%)
      />
    </div>
  );
}

export default App;

Flip Image

import React from 'react';
import { PixelsImage } from 'react-pixels';

function App() {
  return (
    <div>
      <h1>Pixels Image React Component</h1>
      <PixelsImage
        src="path/to/your/image.jpg"
        horizontalFlip={true} // flip image horizontal
        verticalFlip={false} // flip image vertical
      />
    </div>
  );
}

export default App;

Fast Load

import React from 'react';
import { PixelsImage } from 'react-pixels';

function App() {
  return (
    <div>
      <h1>Pixels Image React Component</h1>
      <PixelsImage
        src={image} // HTMLImageElement (ref or instance of "new Image()")
        filter="greyscale"
      />
    </div>
  );
}

export default App;

Image Source Cached

import React, { useEffect, useState } from 'react';
import { PixelsImage, getImageSource, PixelsImageSource } from 'react-pixels';

function App() {
  const [source, setSource] = useState<PixelsImageSource>();

  useEffect(() => {
    getImageSource("./your-image.png").then(setSource)
  }, [])

  return (
    <div>
      <h1>Pixels Image React Component</h1>
      {source && <PixelsImage
        src={source} // Cached image
        filter="greyscale"
      />}
    </div>
  );
}

export default App;

Export image

import React from 'react';
import { PixelsImage } from 'react-pixels';

function App() {
  return (
    <div>
      <h1>Pixels Image React Component</h1>
      <PixelsImage
        src="path/to/your/image.jpg"
        filter="greyscale" // or ["greyscale", ...] to apply more than one filter
        brightness={0.2}
        onFilter={async (exportObject) => {
            await exportObject.getBlob() // for large images
            exportObject.getDataURL() // for small images
            exportObject.getCanvas() // get canvas object
            await exportObject.getImageFromDataURL() // same as getDataURL but as a <img> element
            await exportObject.getImageFromBlob() // same as getBlob but as a <img> element
        }}
      />
    </div>
  );
}

export default App;