Image Format Converter

1npm install pixel-craft --save

1import React, { useEffect, useRef, useState } from 'react';
2
3type FormatConverterProps = {
4  src: string;
5  format?: 'image/png' | 'image/jpeg' | 'image/webp';
6  quality?: number;
7  alt?: string;
8  width?: number;
9  height?: number;
10};
11
12const ImageFormatConverter: React.FC<FormatConverterProps> = ({
13  src,
14  format = 'image/png',
15  quality = 0.92,
16  alt = 'Converted Image',
17  width,
18  height,
19}) => {
20  const canvasRef = useRef<HTMLCanvasElement>(null);
21  const [convertedSrc, setConvertedSrc] = useState<string | null>(null);
22
23  useEffect(() => {
24    const img = new Image();
25    img.crossOrigin = 'anonymous';
26    img.src = src;
27
28    img.onload = () => {
29      const canvas = canvasRef.current;
30      if (canvas) {
31        canvas.width = width || img.width;
32        canvas.height = height || img.height;
33        const ctx = canvas.getContext('2d');
34        if (ctx) {
35          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
36          const newDataUrl = canvas.toDataURL(format, quality);
37          setConvertedSrc(newDataUrl);
38        }
39      }
40    };
41  }, [src, format, quality, width, height]);
42
43  return (
44    <div>
45      <canvas ref={canvasRef} style={{ display: 'none' }} />
46      {convertedSrc && (
47        <>
48          <h4>Preview - Format: {format}</h4>
49          <img src={convertedSrc} alt={alt} width={width} height={height} style={{ border: '1px solid #ccc' }} />
50        </>
51      )}
52    </div>
53  );
54};
55
56export default ImageFormatConverter;