Package Exports

react-pixels
react-pixels/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-pixels) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Pixels Image Preview

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!

Installation
Usage

Installation

You can install the Pixels Image React Component using npm:

npm install react-pixels

or yarn:

yarn add react-pixels

Usage

Import the Pixels Image component in your React application:

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

react-pixels