Black image issue.

[fluxx030]

please help me to fix this , after crop getting black image .

here is my code :

import { useState } from 'react';
import ReactCrop from 'react-image-crop';
import Button from '@mui/material/Button';
import 'react-image-crop/dist/ReactCrop.css';

function CropImageNow() {
  const [src, setSrc] = useState(null);
  const [crop, setCrop] = useState({ aspect: 16 / 9 });
  const [image, setImage] = useState(null);
  const [output, setOutput] = useState(null);

  const selectImage = (file) => {
    setSrc(URL.createObjectURL(file));
    setImage(file);
  };

  const cropImageNow = () => {
    console.log(image)
    // const img = document.createElement("img");
    // img.src = src
    const img = document.getElementById("xyz");

    const canvas = document.createElement('canvas');
    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');

    const pixelRatio = window.devicePixelRatio;
    canvas.width = crop.width * pixelRatio;
    canvas.height = crop.height * pixelRatio;
    ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
    ctx.imageSmoothingQuality = 'high';


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


    // Converting to base64
    const base64Image = canvas.toDataURL('image/jpeg');
    setOutput(base64Image);
  };

  return (
    <div className="App">
      <center>
        <input
          type="file"
          accept="image/*"
          onChange={(e) => {
            selectImage(e.target.files[0]);
          }}
        />
        <br />
        <br />
        <div>
          {src && (
            <div>
              <ReactCrop src={src} onImageLoaded={setImage}
                crop={crop} onChange={setCrop} >
                <img src={src} alt=""  id='xyz'/>
              </ReactCrop>
              {/* <ReactCrop src={src} onImageLoaded={setImage}
								crop={crop} onChange={setCrop} /> */}
              <br />
              <Button onClick={cropImageNow}>Crop</Button>

              <br />
              <br />
              {/* <img src={src} alt="" /> */}
            </div>
          )}
        </div>
        <div>{output && <img src={output} alt="" />}</div>
      </center>
    </div>
  );
}

export default CropImageNow;