React.js Project to Build Image Cropper Editor Using react-image-crop Library

App.jsx

// React.js Project to Build Image Cropper Editor Using react-image-crop Library
import React, { useState, useRef } from 'react';
import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';

function ImageCropper() {
  const [image, setImage] = useState(null);
  const [crop, setCrop] = useState({
    unit: '%',
    x: 25,
    y: 25,
    width: 50,
    height: 50,
  });
  const [completedCrop, setCompletedCrop] = useState(null);
  const [croppedImageUrl, setCroppedImageUrl] = useState(null);
  const imgRef = useRef(null);
  const canvasRef = useRef(null);

  const onImageLoad = (e) => {
    const { naturalWidth: width, naturalHeight: height } = e.currentTarget;
    setCrop(centerCrop(makeAspectCrop({ unit: '%', width: 50 }, 1, width, height), width, height));
  };

  const onCropComplete = (crop) => {
    setCompletedCrop(crop);
    if (crop && imgRef.current) {
      generateCroppedImage(crop);
    }
  };

  const generateCroppedImage = (crop) => {
    const image = imgRef.current;
    const canvas = canvasRef.current;
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;

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

    ctx.drawImage(
      image,
      crop.x * scaleX,
      crop.y * scaleY,
      crop.width * scaleX,
      crop.height * scaleY,
      0,
      0,
      crop.width,
      crop.height
    );

    const url = canvas.toDataURL('image/jpeg');
    setCroppedImageUrl(url);
  };

  const handleImageChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const url = URL.createObjectURL(file);
      setImage(url);
    }
  };

  const downloadCroppedImage = () => {
    if (croppedImageUrl) {
      const link = document.createElement('a');
      link.href = croppedImageUrl;
      link.download = 'cropped-image.jpg';
      link.click();
    }
  };

  return (
    <div style={{ textAlign: 'center', padding: '20px' }}>
      <h2>React Image Crop Demo</h2>
      <input type="file" accept="image/*" onChange={handleImageChange} />

      {image && (
        <ReactCrop
          crop={crop}
          onChange={(newCrop) => setCrop(newCrop)}
          onComplete={onCropComplete}
          aspect={1}
        >
          <img
            ref={imgRef}
            src={image}
            alt="To Crop"
            style={{ maxWidth: '100%' }}
            onLoad={onImageLoad}
          />
        </ReactCrop>
      )}

      <div style={{ margin: '20px 0' }}>
        {croppedImageUrl && (
          <>
            <h3>Cropped Image Preview:</h3>
            <img src={croppedImageUrl} alt="Cropped Preview" style={{ maxWidth: '100%' }} />
            <button style={{ marginTop: '10px' }} onClick={downloadCroppedImage}>
              Download Cropped Image
            </button>
          </>
        )}
      </div>

      <canvas ref={canvasRef} style={{ display: 'none' }} />
    </div>
  );
}

export default ImageCropper;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

// React.js Project to Build Image Cropper Editor Using react-image-crop Library

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

import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';

import 'react-image-crop/dist/ReactCrop.css';

function ImageCropper() {

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

const [crop, setCrop] = useState({

unit: '%',

x: 25,

y: 25,

width: 50,

height: 50,

});

const [completedCrop, setCompletedCrop] = useState(null);

const [croppedImageUrl, setCroppedImageUrl] = useState(null);

const imgRef = useRef(null);

const canvasRef = useRef(null);

const onImageLoad = (e) => {

const { naturalWidth: width, naturalHeight: height } = e.currentTarget;

setCrop(centerCrop(makeAspectCrop({ unit: '%', width: 50 }, 1, width, height), width, height));

};

const onCropComplete = (crop) => {

setCompletedCrop(crop);

if (crop && imgRef.current) {

generateCroppedImage(crop);

}

};

const generateCroppedImage = (crop) => {

const image = imgRef.current;

const canvas = canvasRef.current;

const scaleX = image.naturalWidth / image.width;

const scaleY = image.naturalHeight / image.height;

canvas.width = crop.width;

canvas.height = crop.height;

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

ctx.drawImage(

image,

crop.x * scaleX,

crop.y * scaleY,

crop.width * scaleX,

crop.height * scaleY,

crop.width,

crop.height

);

const url = canvas.toDataURL('image/jpeg');

setCroppedImageUrl(url);

};

const handleImageChange = (e) => {

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

if (file) {

const url = URL.createObjectURL(file);

setImage(url);

}

};

const downloadCroppedImage = () => {

if (croppedImageUrl) {

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

link.href = croppedImageUrl;

link.download = 'cropped-image.jpg';

link.click();

}

};

return (

<h2>React Image Crop Demo</h2>

{image && (

<ReactCrop

crop={crop}

onChange={(newCrop) => setCrop(newCrop)}

onComplete={onCropComplete}

aspect={1}

<img

ref={imgRef}

src={image}

alt="To Crop"

style={{ maxWidth: '100%' }}

onLoad={onImageLoad}

</ReactCrop>

)}

{croppedImageUrl && (

<h3>Cropped Image Preview:</h3>

Download Cropped Image

</button>

</>

)}

</div>

</div>

);

}

export default ImageCropper;

React.js Project to Build Image Cropper Editor Using react-image-crop Library

Comments

Leave a Reply Cancel reply

Archives