Image Compressor

1npm install pixel-craft --save

1import React, { useEffect, useState } from 'react';
2
3type Unit = 'KB' | 'MB';
4
5interface ImageCompressorProps {
6  imageUrl?: string;       // External image URL
7  imagePath?: string;      // Local/public path to image
8  targetSize: number;      // Target size value
9  unit?: Unit;             // KB or MB
10  onCompressed?: (compressedDataUrl: string, blob: Blob) => void;
11}
12
13const ImageCompressor: React.FC<ImageCompressorProps> = ({
14  imageUrl,
15  imagePath,
16  targetSize,
17  unit = 'KB',
18  onCompressed,
19}) => {
20  const [compressedUrl, setCompressedUrl] = useState<string | null>(null);
21
22  useEffect(() => {
23    const finalImageSource = imageUrl || imagePath;
24    if (!finalImageSource) return;
25
26    const compressImage = async () => {
27      const img = new Image();
28      img.crossOrigin = 'anonymous';
29      img.src = finalImageSource;
30
31      const targetBytes = unit === 'MB' ? targetSize * 1024 * 1024 : targetSize * 1024;
32
33      img.onload = () => {
34        const canvas = document.createElement('canvas');
35        const ctx = canvas.getContext('2d');
36        if (!ctx) return;
37
38        canvas.width = img.width;
39        canvas.height = img.height;
40        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
41
42        let quality = 0.92;
43        let dataUrl = canvas.toDataURL('image/jpeg', quality);
44        let blob = dataURLToBlob(dataUrl);
45
46        const compressLoop = () => {
47          dataUrl = canvas.toDataURL('image/jpeg', quality);
48          blob = dataURLToBlob(dataUrl);
49
50          if (blob.size <= targetBytes || quality <= 0.1) {
51            setCompressedUrl(dataUrl);
52            onCompressed?.(dataUrl, blob);
53            return;
54          }
55
56          quality -= 0.05;
57          compressLoop();
58        };
59
60        compressLoop();
61      };
62
63      img.onerror = () => {
64        console.error('Failed to load image.');
65      };
66    };
67
68    compressImage();
69  }, [imageUrl, imagePath, targetSize, unit, onCompressed]);
70
71  const dataURLToBlob = (dataUrl: string): Blob => {
72    const byteString = atob(dataUrl.split(',')[1]);
73    const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0];
74    const ab = new ArrayBuffer(byteString.length);
75    const ia = new Uint8Array(ab);
76    for (let i = 0; i < byteString.length; i++) {
77      ia[i] = byteString.charCodeAt(i);
78    }
79    return new Blob([ab], { type: mimeString });
80  };
81
82  return (
83    <div>
84      {compressedUrl ? (
85        <div>
86          <p>Compressed Image:</p>
87          <img src={compressedUrl} alt="Compressed" style={{ maxWidth: '100%' }} />
88        </div>
89      ) : (
90        <p>Compressing image...</p>
91      )}
92    </div>
93  );
94};
95
96export default ImageCompressor;