How do you save the result of a cropped image as a file with cropper js?

Question

I have used cropper js to allow the user to crop a photo into a round image. Now, I am curious as to how to save the cropped image as a file so I can add it to the database as the user's profile picture.

Here is the html input element:

<label for="change-me"></label>
<input
  class="form-control"
  type="file"
  name="change-me"
  id="change-me"
  accept="image/*"
/>

<button class="btn-primary save hide mt-2">Save</button>

<div class="result"></div>

Here is the current JavaScript functionality:

let result = document.querySelector(".result");
img_result = document.querySelector(".img-result");
img_w = document.querySelector(".img-w");
img_h = document.querySelector(".img-h");
options = document.querySelector(".options");
save = document.querySelector(".save");
cropped = document.querySelector(".cropped");
change_me = document.querySelector("#change-me");
save_changes = document.querySelector("#save-changes");
let cropped_img;
cropper = "";

change_me.addEventListener("change", (e) => {
  if (e.target.files.length) {
    const reader = new FileReader();
    reader.onload = (e) => {
      if (e.target.result) {
        //Create new Image
        let img = document.createElement("img");
        img.id = "image";
        img.src = e.target.result;
        img.style.height = "400px";
        //clean result before
        result.innerHTML = "";
        //append new image
        result.appendChild(img);
        //Show save btn and options
        save.classList.remove("hide");
        options.classList.remove("hide");
        //initiate cropper
        cropper = new Cropper(img, {
          aspectRatio: 1,
          viewMode: 1,
          ready: function () {
            croppable = true;
          },
        });
        console.log(cropper);
      }
    };
    reader.readAsDataURL(e.target.files[0]);
  }
});
//crop image on save
save.addEventListener("click", (e) => {
  e.preventDefault();
  let imgSrc = cropper.getCroppedCanvas({
    width: img_w.value,
  });
  const roundedCanvas = getRoundedCanvas(imgSrc);
  //Remove hide class of img
  cropped.classList.remove("hide");
  img_result.classList.remove("hide");
  //show image cropped
  cropped_img = roundedCanvas.toDataURL();
  profile_form = document.querySelector("#profile_pic_test");
});

function getRoundedCanvas(sourceCanvas) {
  var canvas = document.createElement("canvas");
  var context = canvas.getContext("2d");
  var width = sourceCanvas.width;
  var height = sourceCanvas.height;
  canvas.width = width;
  canvas.height = height;
  context.imageSmoothingEnabled = true;
  context.drawImage(sourceCanvas, 0, 0, width, height);
  context.globalCompositeOperation = "destination-in";
  context.beginPath();
  context.arc(
    width / 2,
    height / 2,
    Math.min(width, height) / 2,
    0,
    2 * Math.PI,
    true
  );
  context.fill();
  return canvas;
}

I would just like to know the best code to save the cropper result as a file so that I can pass that to the database.