Update README.md

README.md

@@ -1,8 +1,90 @@
-<p align="center">
-  <img src="https://cdn-uploads.huggingface.co/production/uploads/66740b1d0f854ba167e0a01b/vMKLRTVv2r6ibfWd_DcQ1.png" width="750"/>
-</p>
+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 (
+    <div className="flex flex-col items-center justify-center">
+      {loading ? (
+        <div className="text-center py-8">Chargement de l'image...</div>
+      ) : error ? (
+        <div className="text-red-500 py-8">{error}</div>
+      ) : (
+        <>
+          <div className="mb-4 text-center">
+            <h2 className="text-lg font-semibold mb-2">Image Rognée</h2>
+            <p className="text-sm text-gray-600">20 pixels supprimés en haut et en bas</p>
+          </div>
+          <div className="border border-gray-300 rounded overflow-hidden">
+            <canvas 
+              ref={canvasRef} 
+              className="max-w-full h-auto"
+              style={{ maxWidth: '750px' }}
+            />
+          </div>
+          <div className="mt-4 text-sm text-gray-600">
+            Dimensions d'origine : {dimensions.width} × {dimensions.height + 40} px<br />
+            Dimensions après rognage : {dimensions.width} × {dimensions.height} px
+          </div>
+          <div className="mt-4 text-sm">
+            <p className="font-medium">Code HTML pour votre image rognée :</p>
+            <pre className="bg-gray-100 p-2 rounded mt-1 overflow-x-auto">
+              {`<p align="center">
+  <img src="VOTRE_IMAGE_ROGNÉE.png" width="750"/>
+</p>`}
+            </pre>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default CroppedImage;
 
 👇 **Read our latest article here:**