dummy page
Reading Time: 2 minutes import React, { useState, useRef } from ‘react’; const ImageResizer = () => { const [selectedFile, setSelectedFile] = useState(null); const [preview, setPreview]…
import React, { useState, useRef } from ‘react’;
const ImageResizer = () => {
const [selectedFile, setSelectedFile] = useState(null);
const [preview, setPreview] = useState(null);
const [originalDimensions, setOriginalDimensions] = useState({ width: 0, height: 0 });
const [newDimensions, setNewDimensions] = useState({ width: 0, height: 0 });
const [aspectRatio, setAspectRatio] = useState(1);
const [maintainAspectRatio, setMaintainAspectRatio] = useState(true);
const [quality, setQuality] = useState(90);
const [outputFormat, setOutputFormat] = useState(‘jpeg’);
const canvasRef = useRef(null);
const [isResizing, setIsResizing] = useState(false);
const [resizedImageUrl, setResizedImageUrl] = useState(null);
const [fileName, setFileName] = useState(”);
const handleFileChange = (event) => {
const file = event.target.files[0];
if (!file) return;
setFileName(file.name.split(‘.’)[0]);
setSelectedFile(file);
setResizedImageUrl(null);
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
const initialWidth = img.width;
const initialHeight = img.height;
setOriginalDimensions({ width: initialWidth, height: initialHeight });
setNewDimensions({ width: initialWidth, height: initialHeight });
setAspectRatio(initialWidth / initialHeight);
setPreview(e.target.result);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
};
const handleWidthChange = (e) => {
const width = parseInt(e.target.value, 10) || 0;
if (maintainAspectRatio) {
const height = Math.round(width / aspectRatio);
setNewDimensions({ width, height });
} else {
setNewDimensions({ …newDimensions, width });
}
};
const handleHeightChange = (e) => {
const height = parseInt(e.target.value, 10) || 0;
if (maintainAspectRatio) {
const width = Math.round(height * aspectRatio);
setNewDimensions({ width, height });
} else {
setNewDimensions({ …newDimensions, height });
}
};
const toggleAspectRatio = () => {
setMaintainAspectRatio(!maintainAspectRatio);
};
const handleQualityChange = (e) => {
setQuality(parseInt(e.target.value, 10));
};
const handleFormatChange = (e) => {
setOutputFormat(e.target.value);
};
const resizeImage = () => {
if (!selectedFile) return;
setIsResizing(true);
const canvas = canvasRef.current;
const ctx = canvas.getContext(‘2d’);
const img = new Image();
img.onload = () => {
// Set canvas dimensions to target size
canvas.width = newDimensions.width;
canvas.height = newDimensions.height;
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw image with resized dimensions
ctx.drawImage(img, 0, 0, newDimensions.width, newDimensions.height);
// Convert canvas to data URL with specified quality
const mimeType = `image/${outputFormat}`;
const resizedDataUrl = canvas.toDataURL(mimeType, quality / 100);
setResizedImageUrl(resizedDataUrl);
setIsResizing(false);
};
img.src = preview;
};
const downloadImage = () => {
if (!resizedImageUrl) return;
const link = document.createElement(‘a’);
link.href = resizedImageUrl;
link.download = `${fileName}_resized.${outputFormat}`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
return (
WordPress Image Resizer
Original Image
{originalDimensions.width} × {originalDimensions.height} pixels
Resize Options
Resized Image
{resizedImageUrl ? (
) : (
{newDimensions.width} × {newDimensions.height} pixels
{selectedFile ? “Click ‘Resize Image’ to preview the result” : “Select an image to begin”}
)}
WordPress Tips:
- Upload the resized image to your WordPress Media Library
- For featured images, 1200×630 pixels is recommended
- For blog content, keep images under 1MB for faster loading
- WebP format provides the best compression with quality
