import React, { useState, useEffect, useRef } from 'react';
const CroppedImage = () => { const [image, setImage] = useState(null); const canvasRef = useRef(null); const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); const [loading, setLoading] = useState(true); const [error, setError] = useState(null);
useEffect(() => { const img = new Image(); img.crossOrigin = "Anonymous"; img.src = "https://cdn-uploads.huggingface.co/production/uploads/66740b1d0f854ba167e0a01b/vMKLRTVv2r6ibfWd_DcQ1.png";
img.onload = () => {
setImage(img);
setDimensions({
width: img.width,
height: img.height - 40 // 20px from top and 20px from bottom
});
setLoading(false);
};
img.onerror = () => {
setError("Impossible de charger l'image. Il s'agit peut-être d'une restriction CORS.");
setLoading(false);
};
}, []);
useEffect(() => { if (image && canvasRef.current) { const canvas = canvasRef.current; const ctx = canvas.getContext('2d');
// Set canvas dimensions to match cropped image size
canvas.width = dimensions.width;
canvas.height = dimensions.height;
// Draw the image with cropping (remove 20px from top)
ctx.drawImage(
image,
0, 20, // Source x, y (start 20px from the top)
dimensions.width, dimensions.height, // Source width, height
0, 0, // Destination x, y
dimensions.width, dimensions.height // Destination width, height
);
}
}, [image, dimensions]);
return (
Image Rognée
20 pixels supprimés en haut et en bas
Dimensions après rognage : {dimensions.width} × {dimensions.height} px
Code HTML pour votre image rognée :
{`
`}
export default CroppedImage;
👇 Read our latest article here: