Trying to save a cropped image in JS with Cropme

JavaScript
#1

I am trying to save a cropped image using Cropme (GitHub - shpontex/cropme: Cropme is a customizable and easy to use javascript image cropper plugin) although my script is not sending any data to the PHP script to save the image? I have tried outputting to the console log but the page just reloads for some reason? Wondering if I have made some mistake? I am very new to JS and don’t use it as often as other code.

<img src="up_img/test.jpg" id="myImage"/>
<a href="" onClick="saveCrop()">Save Crop</a>

<script>
  var element = document.getElementById('myImage');
  new Cropme(element, {
	  viewport: {
  width: 210,
  height: 210,
  type: 'circle',
  border: {
    enable: true,
    width: 2,
    color: '#fff'
  }
},
	  zoom: {
  min: 0.01,
  max: 3,
  enable: true,
  mouseWheel: true,
  slider: true
},
	rotation: {
  enable: true,
  slider: true,
  position: 'right'
}
  });
		
function saveCrop() {
 var myImage = document.getElementById('myImage');
  var cropme = new Cropme(element);
 // string
// object
var myImage = $('#myImage').cropme();
myImage.cropme('crop', {
    type: 'base64'
}).then(function(output) {
     var formData = new FormData();
        formData.append("myImage", blob);
        
        $.ajax({
            url: "system/save_crop.php", // name of the file which we will be creating soon
            method: "POST",
            data: formData,
            processData: false, // necessary for sending image data
            contentType: false, // necessary for sending image data
            success: function (response) {
                alert(response);
            }, error: function (xhr, status, error) {
                console.log(status, error);
            }
        });
});
}
</script>