<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js" integrity="sha512-6lplKUSl86rUVprDIjiW8DuOniNX8UDoRATqZSds/7t6zCQZfaCe3e5zcGaQwxa8Kpn5RTM9Fvl3X2lLV4grPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<input type="file" onInput="foo(event)" accept="image/*">

function readImage(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function () {
      const image = new Image();
      image.onload = function () {
        resolve(image);
      };
      image.onerror = function (error) {
        reject(error);
      };
      image.src = reader.result;
    };
    reader.onerror = function (error) {
      reject(error);
    };
    reader.readAsDataURL(file);
  });
}
async function cropImage(image) {
  return new Promise((resolve) => {
    const croppedCanvas = new Cropper(image, {
      ready: function () {
        cropper.setCropBoxData({
          width: 600,
          height: 600,
        });
      },
    })
      .getCroppedCanvas()
      .toBlob((blob) => {
        const croppedFile = new File([blob], "i.jpeg", {
          type: "image/jpeg",
        });
        resolve(croppedFile);
      }, "image/jpeg");
  });
}

async function foo(event){
let file = event.target.files[0];
  console.log('file found')
let image = await readImage(file);
  console.log('image readed')
let croppedBlob = await cropImage(image);
  //not works here(
console.log(croppedBlob)
}