App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import React, { useState } from "react"; import ReactCompareImage from "react-compare-image"; function ImageComparisonApp() { const [leftImage, setLeftImage] = useState(null); const [rightImage, setRightImage] = useState(null); const handleImageUpload = (e, setImage) => { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = () => { setImage(reader.result); }; reader.readAsDataURL(file); } }; return ( <div style={{ textAlign: "center", padding: "20px" }}> <h1>Image Comparison App</h1> <div style={{ marginBottom: "20px" }}> <input type="file" accept="image/*" onChange={(e) => handleImageUpload(e, setLeftImage)} /> <span style={{ margin: "0 10px" }}>Upload Left Image</span> <input type="file" accept="image/*" onChange={(e) => handleImageUpload(e, setRightImage)} /> <span style={{ margin: "0 10px" }}>Upload Right Image</span> </div> {leftImage && rightImage ? ( <ReactCompareImage leftImage={leftImage} rightImage={rightImage} leftImageLabel="Before" rightImageLabel="After" sliderPositionPercentage={0.5} /> ) : ( <p>Please upload both images to compare.</p> )} </div> ); } export default ImageComparisonApp; |
