Build a React.js Image Blur & Pixelate Editor in Browser Using Canvas API & Javascript

App.jsx

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

const ImageEditor = () => {
  const [image, setImage] = useState(null);
  const [blurAmount, setBlurAmount] = useState(0);
  const [pixelSize, setPixelSize] = useState(0);
  const canvasRef = useRef(null);

  // Handle image file input
  const handleFileInput = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = () => setImage(reader.result);
      reader.readAsDataURL(file);
    }
  };

  // Apply effects and render on the canvas
  const applyEffects = () => {
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");
    const img = new Image();
    img.src = image;
    img.onload = () => {
      // Clear canvas and set size
      canvas.width = img.width;
      canvas.height = img.height;
      context.clearRect(0, 0, canvas.width, canvas.height);

      // Draw image onto canvas
      if (pixelSize > 1) {
        // Pixelate effect
        context.drawImage(img, 0, 0, img.width / pixelSize, img.height / pixelSize);
        context.imageSmoothingEnabled = false;
        context.drawImage(
          canvas,
          0,
          0,
          img.width / pixelSize,
          img.height / pixelSize,
          0,
          0,
          img.width,
          img.height
        );
      } else if (blurAmount > 0) {
        // Blur effect
        context.filter = `blur(${blurAmount}px)`;
        context.drawImage(img, 0, 0);
        context.filter = "none";
      } else {
        // No effect, draw original
        context.drawImage(img, 0, 0);
      }
    };
  };

  // Handle downloading the edited image
  const downloadImage = () => {
    const canvas = canvasRef.current;
    const link = document.createElement("a");
    link.download = "edited_image.png";
    link.href = canvas.toDataURL("image/png");
    link.click();
  };

  return (
    <Container>
      <Row className="my-4">
        <Col>
          <h3>Image Blur and Pixelate Editor</h3>
          <Form.Group controlId="fileInput">
            <Form.Label>Select an Image</Form.Label>
            <Form.Control type="file" accept="image/*" onChange={handleFileInput} />
          </Form.Group>
        </Col>
      </Row>

      {image && (
        <>
          <Row className="my-3">
            <Col md={6}>
              <Form.Label>Blur Amount</Form.Label>
              <Form.Control
                type="range"
                min="0"
                max="10"
                value={blurAmount}
                onChange={(e) => setBlurAmount(Number(e.target.value))}
                disabled={pixelSize > 1}
              />
            </Col>
            <Col md={6}>
              <Form.Label>Pixel Size</Form.Label>
              <Form.Control
                type="range"
                min="0"
                max="20"
                value={pixelSize}
                onChange={(e) => setPixelSize(Number(e.target.value))}
                disabled={blurAmount > 0}
              />
            </Col>
          </Row>

          <Row>
            <Col>
              <Button variant="primary" onClick={applyEffects}>
                Apply Effects
              </Button>
            </Col>
          </Row>

          <Row className="my-3">
            <Col>
              <canvas ref={canvasRef} style={{ maxWidth: "100%", border: "1px solid #ddd" }} />
            </Col>
          </Row>

          <Row>
            <Col>
              <Button variant="success" onClick={downloadImage}>
                Download Edited Image
              </Button>
            </Col>
          </Row>
        </>
      )}
    </Container>
  );
};

export default ImageEditor;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

import React, { useState, useRef } from "react";

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

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

const ImageEditor = () => {

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

const [blurAmount, setBlurAmount] = useState(0);

const [pixelSize, setPixelSize] = useState(0);

const canvasRef = useRef(null);

// Handle image file input

const handleFileInput = (e) => {

const file = e.target.files[0];

if (file) {

const reader = new FileReader();

reader.onload = () => setImage(reader.result);

reader.readAsDataURL(file);

}

};

// Apply effects and render on the canvas

const applyEffects = () => {

const canvas = canvasRef.current;

const context = canvas.getContext("2d");

const img = new Image();

img.src = image;

img.onload = () => {

// Clear canvas and set size

canvas.width = img.width;

canvas.height = img.height;

context.clearRect(0, 0, canvas.width, canvas.height);

// Draw image onto canvas

if (pixelSize > 1) {

// Pixelate effect

context.drawImage(img, 0, 0, img.width / pixelSize, img.height / pixelSize);

context.imageSmoothingEnabled = false;

context.drawImage(

canvas,

img.width / pixelSize,

img.height / pixelSize,

img.width,

img.height

);

} else if (blurAmount > 0) {

// Blur effect

context.filter = `blur(${blurAmount}px)`;

context.drawImage(img, 0, 0);

context.filter = "none";

} else {

// No effect, draw original

context.drawImage(img, 0, 0);

}

};

// Handle downloading the edited image

const downloadImage = () => {

const canvas = canvasRef.current;

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

link.download = "edited_image.png";

link.href = canvas.toDataURL("image/png");

link.click();

};

return (

<Col>

<h3>Image Blur and Pixelate Editor</h3>

<Form.Group controlId="fileInput">

<Form.Label>Select an Image</Form.Label>

<Form.Control type="file" accept="image/*" onChange={handleFileInput} />

</Form.Group>

</Col>

</Row>

{image && (

<Form.Label>Blur Amount</Form.Label>

<Form.Control

type="range"

min="0"

max="10"

value={blurAmount}

onChange={(e) => setBlurAmount(Number(e.target.value))}

disabled={pixelSize > 1}

</Col>

<Form.Label>Pixel Size</Form.Label>

<Form.Control

type="range"

min="0"

max="20"

value={pixelSize}

onChange={(e) => setPixelSize(Number(e.target.value))}

disabled={blurAmount > 0}

</Col>

</Row>

<Row>

<Col>

Apply Effects

</Button>

</Col>

</Row>

<Col>

</Col>

</Row>

<Row>

<Col>

Download Edited Image

</Button>

</Col>

</Row>

</>

)}

</Container>

);

};

export default ImageEditor;

Build a React.js Image Blur & Pixelate Editor in Browser Using Canvas API & Javascript

Comments

Leave a Reply Cancel reply

Archives