nuctro.com

Lego Image

Description

Lego Image is a versatile image editing tool for JavaScript environments. It allows developers to perform image editing operations programmatically, such as resizing, cropping. This package is designed to be easy to use, efficient, and customizable for different image editing needs.

Features

• Resize images to specific dimensions.
• Crop images to desired aspect ratios.
• Rotate and flip images.

Demo

• View demo on youtube
• Run Code

Install Dependencies

Make sure you have installed the necessary dependencies. You already have lego-image installed, but you may need additional dependencies such as React.

npm install lego-image

Import Dependencies

Import the required dependencies:

import initCroper from "lego-image"

Reactjs example

// Define your App component
function App() {
  // Define state variables
  const [subscribe, setSubscribe] = useState(false);
  const ref = useRef(null);

  // Initialize lego-image with configuration
  useEffect(() => {
    // Check if ref exists and subscribe state is false
    if (ref.current && !subscribe) {
      // Set subscribe state to true
      setSubscribe(true);

      // Initialize lego-image with configuration
      const canvas = document.getElementById("canvas");
      const cropper = initCroper({
        canvas: canvas,
        onChange: (log) => console.log(log),
      });

      // Add event listeners for buttons
      document
        .getElementById("loadImageButton")
        .addEventListener("click", () => {
          // Code to load image
          const imageInput = document.getElementById("imageInput");
          const imageUrlInput = document.getElementById("imageUrlInput");
          if (imageInput.files.length > 0) {
            const selectedImage = imageInput.files[0];
            const imageUrl = URL.createObjectURL(selectedImage);
            cropper.setCorper({
              imageUrl: imageUrl,
              pos: { x: 0.5, y: 0.5 },
              borderLess: true,
            });
          } else if (imageUrlInput.value) {
            cropper.setCorper({
              imageUrl: imageUrlInput.value,
              pos: { x: 0.5, y: 0.5 },
              borderLess: true,
            });
          }
        });

      document.getElementById("zoomInButton").addEventListener("click", () => {
        cropper.zoomIn();
      });

      document.getElementById("zoomOutButton").addEventListener("click", () => {
        cropper.zoomOut();
      });

      document.getElementById("resetButton").addEventListener("click", () => {
        cropper.resetImage();
      });
    }
    // Cleanup event listeners when component unmounts
    return () => {
      document
        .getElementById("loadImageButton")
        .removeEventListener("click", () => {});
    };
  }, [ref.current]);

  // JSX code for rendering the component
  return (
    <div className="App">
      <div style={{ backgroundColor: "whitesmoke", padding: "10px", marginBottom: "20px" }}>
        <input type="file" id="imageInput" accept="image/*" />
        <input type="text" id="imageUrlInput" placeholder="Image URL" />
        <button id="loadImageButton">Load Image</button>
        <button id="zoomInButton">Zoom In</button>
        <button id="zoomOutButton">Zoom Out</button>
        <button id="resetButton">Reset</button>
      </div>
      <div id="canvasContainer" style={{ margin: "0 auto" }}>
        <canvas id="canvas" ref={ref}></canvas>
      </div>
    </div>
  );
}

export default App;

Style(CSS)

#canvasContainer {
  position: relative;
  width: 600px; /* Set your desired canvas width */
  height: 600px; /* Set your desired canvas height */
  border: 1px solid black;
  overflow: hidden; /* Ensure content beyond canvas size is hidden */
}
#canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated; /* Prevent blurriness */
  background-color: rgb(0, 0, 0);
}

Config

initCroper(option):

option: type object

option

canvas: type canvas element reference
onChange: type callback function

• return type object
• x: type number, default 0.5,
• y: type number, default 0.5,
• scale: type number, default 1

cropper.setCorper(option):

option: type object

option

• imageUrl: type string
• pos: type object
• scale: type scale
• borderLess: type boolean

cropper.resetImage() - type void

cropper.zoomIn() - type void

cropper.zoomOut() - type void