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