Jimp React Demo

App.js

// Install Jimp 
//   npm install jimp --save
// Offical site
//  https://www.npmjs.com/package/jimp
// Sample Reference
//  https://img.ly/blog/how-to-manipulate-an-image-with-jimp-in-react/

import './App.css';
import Jimp from "jimp";
import { useEffect, useState } from "react";



function App() {
  const [jimpImage, setJimpImage] = useState(undefined);
  const [image, setImage] = useState(undefined);
  const [transformedImage, setTransformedImage] = useState(undefined);

  //  const imageUrl = 'https://images.unsplash.com/photo-1648468092356-5587d9acc33f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80';
const imageUrl = 'https://images.unsplash.com/photo-1648459915266-d4793e6b5a8e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1380&q=80';
  useEffect(() => {
    const loadImage = async () => {
      // generating the Jimp data structure
      // loading an image from an URL
      const jimpImage = await Jimp.read(imageUrl);
      setJimpImage(jimpImage);

      // transforming jimpImage into its Base64 representation
      // and storing it
      const image = await jimpImage.getBase64Async(Jimp.MIME_JPEG);
      setImage(image);
    };

    loadImage();
  }, [imageUrl]);

  useEffect(() => {
    if (jimpImage) {
      const transformImage = async () => {
        // performing the Jimp image processing operation 
        // on jimpImage...

        // e.g. 
        //jimpImage.crop(100, 100, 100, 100)
        //jimpImage.greyscale()
        jimpImage.greyscale().contrast(0.7).posterize(2)

        // storing the transformed image
        // in Base64 format
        const transformedImage = await jimpImage.getBase64Async(Jimp.MIME_JPEG);
        //const transformedImage = await jimpImage.crop(100, 100, 100, 100);
        setTransformedImage(transformedImage);
      };

      transformImage();
    }
  }, [jimpImage, 300, 300]);

  // return (
  //   <div className="App">
  //     <header className="App-header">
  //       JIMP Demo        
  //     </header>
  //   </div>
  // );

  return image && jimpImage ? (
    <div className="App">
      <div style={{'display':'flex', 'flex-direction': 'row'}}>
        <div>
          <h1>Original Image</h1>
          <img width="400" className="originalImage" src={image} alt="Original" />

        </div>


        <div>
          <h1>Transformed Image</h1>
          <img width="400"
            className="transformedImage"
            src={transformedImage}
            alt="Transformed"
          />
        </div>
      </div>


    </div>
  ) : (
    <>Loading...</>
  )
}

export default App;