PHOTO COMPRESS TOOL
// ImageCompressTool.js
import React, { useState } from "react";
export default function ImageCompressTool() {
const [originalImage, setOriginalImage] = useState(null);
const [compressedImage, setCompressedImage] = useState(null);
const handleImageUpload = (e) => {
const file = e.target.files[0];
if (file && file.type.startsWith("image/")) {
const reader = new FileReader();
reader.onload = (event) => {
setOriginalImage(event.target.result);
compressImage(event.target.result);
};
reader.readAsDataURL(file);
}
};
const compressImage = (imageSrc) => {
const img = new Image();
img.src = imageSrc;
img.onload = () => {
const canvas = document.createElement("canvas");
const scaleFactor = 0.5;
canvas.width = img.width * scaleFactor;
canvas.height = img.height * scaleFactor;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
const compressedDataUrl = canvas.toDataURL("image/jpeg", 0.7);
setCompressedImage(compressedDataUrl);
};
};
return (
);
}
Image Compress Tool
{originalImage && (
)}
{compressedImage && (
)}
टिप्पणियाँ