Build a React.js Image & Webp Converter in Browser Using Canvas API & react-dropzone in Javascript

App.jsx

import React, { useState } from 'react';
import { Container, Row, Col, Button, Card, Form } from 'react-bootstrap';
import { useDropzone } from 'react-dropzone';
import "bootstrap/dist/css/bootstrap.min.css"


function App() {
  const [image, setImage] = useState(null);
  const [convertedImage, setConvertedImage] = useState(null);
  const [imageFormat, setImageFormat] = useState('webp'); // Default format is WebP

  const onDrop = (acceptedFiles) => {
    const file = acceptedFiles[0];
    if (file) {
      setImage(URL.createObjectURL(file));
    }
  };

  const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    accept: 'image/*',
  });

  const handleConvert = () => {
    const img = new Image();
    img.src = image;
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);

      // Convert to selected format (WebP, PNG, or JPEG)
      const converted = canvas.toDataURL(`image/${imageFormat}`);
      setConvertedImage(converted);
    };
  };

  const handleDownload = () => {
    const link = document.createElement('a');
    link.href = convertedImage;
    link.download = `converted-image.${imageFormat}`;
    link.click();
  };

  return (
    <Container className="mt-5">
      <Row>
        <Col md={6}>
          <Card>
            <Card.Body>
              <h3>Upload Image</h3>
              <div {...getRootProps()} className="dropzone">
                <input {...getInputProps()} />
                <p>Drag & drop an image here, or click to select</p>
              </div>
              {image && (
                <div>
                  <h5>Preview:</h5>
                  <img src={image} alt="Preview" style={{ maxWidth: '100%' }} />
                </div>
              )}
            </Card.Body>
          </Card>
        </Col>

        <Col md={6}>
          {image && (
            <Card>
              <Card.Body>
                <h3>Convert Image</h3>
                <Form>
                  <Form.Group controlId="formFormat">
                    <Form.Label>Select Format</Form.Label>
                    <Form.Control
                      as="select"
                      value={imageFormat}
                      onChange={(e) => setImageFormat(e.target.value)}
                    >
                      <option value="webp">WebP</option>
                      <option value="jpeg">JPEG</option>
                      <option value="png">PNG</option>
                    </Form.Control>
                  </Form.Group>
                  <Button variant="primary" onClick={handleConvert}>
                    Convert
                  </Button>
                </Form>
                {convertedImage && (
                  <div>
                    <h5>Converted Image Preview:</h5>
                    <img src={convertedImage} alt="Converted" style={{ maxWidth: '100%' }} />
                    <Button variant="success" onClick={handleDownload} className="mt-2">
                      Download Converted Image
                    </Button>
                  </div>
                )}
              </Card.Body>
            </Card>
          )}
        </Col>
      </Row>
    </Container>
  );
}

export default App;

100

101

102

103

104

105

106

107

108

import React, { useState } from 'react';

import { Container, Row, Col, Button, Card, Form } from 'react-bootstrap';

import { useDropzone } from 'react-dropzone';

import "bootstrap/dist/css/bootstrap.min.css"

function App() {

const [image, setImage] = useState(null);

const [convertedImage, setConvertedImage] = useState(null);

const [imageFormat, setImageFormat] = useState('webp'); // Default format is WebP

const onDrop = (acceptedFiles) => {

const file = acceptedFiles[0];

if (file) {

setImage(URL.createObjectURL(file));

}

};

const { getRootProps, getInputProps } = useDropzone({

onDrop,

accept: 'image/*',

});

const handleConvert = () => {

const img = new Image();

img.src = image;

img.onload = () => {

const canvas = document.createElement('canvas');

const ctx = canvas.getContext('2d');

canvas.width = img.width;

canvas.height = img.height;

ctx.drawImage(img, 0, 0);

// Convert to selected format (WebP, PNG, or JPEG)

const converted = canvas.toDataURL(`image/${imageFormat}`);

setConvertedImage(converted);

};

const handleDownload = () => {

const link = document.createElement('a');

link.href = convertedImage;

link.download = `converted-image.${imageFormat}`;

link.click();

};

return (

<Row>

<Card>

<Card.Body>

<h3>Upload Image</h3>

<p>Drag & drop an image here, or click to select</p>

</div>

{image && (

<div>

<h5>Preview:</h5>

</div>

)}

</Card.Body>

</Card>

</Col>

{image && (

<Card>

<Card.Body>

<h3>Convert Image</h3>

<Form>

<Form.Group controlId="formFormat">

<Form.Label>Select Format</Form.Label>

<Form.Control

as="select"

value={imageFormat}

onChange={(e) => setImageFormat(e.target.value)}

</Form.Control>

</Form.Group>

Convert

</Button>

</Form>

{convertedImage && (

<div>

<h5>Converted Image Preview:</h5>

Download Converted Image

</Button>

</div>

)}

</Card.Body>

</Card>

)}

</Col>

</Row>

</Container>

);

}

export default App;

Build a React.js Image & Webp Converter in Browser Using Canvas API & react-dropzone in Javascript

Comments

Leave a Reply Cancel reply

Archives