Uncaught TypeError: hammerit.get is not a function - jquery cropbox

getting this error when using jquery cropbox

Uncaught TypeError: hammerit.get is not a function
I need also Crop or download button

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.cropbox.js"></script>
<script type="text/javascript" defer>
    $(function () {
        var r = $('#results'),
            x = $('.cropX', r),
            y = $('.cropY', r),
            w = $('.cropW', r),
            h = $('.cropH', r);
        $('#cropimage').cropbox({
            width: 200,
            height: 200
        }).on('cropbox', function (event, results, img) {
            x.text(results.cropX);
            y.text(results.cropY);
            w.text(results.cropW);
            h.text(results.cropH);
        });
    });
</script>


<img id="cropimage" alt="" src="http://acornejo.github.io/jquery-cropbox/img.jpg" />
    <div id="results"> <b>X</b>: <span class="cropX"></span>
     <b>Y</b>: <span class="cropY"></span>
     <b>W</b>: <span class="cropW"></span>
     <b>H</b>: <span class="cropH"></span>
    
    </div>
<a>Download</a>

Error image is:

Update the jQuery and load it before any other jQuery plugin.

Also add the crop jQuery and CSS to the snippet.

For some reason does the newest hammer.js not work, so I left it

This works in a JSFiddle but possibly not on SO due to iFrame security

to upload instead of download use https://stackoverflow.com/questions/13333378/how-can-javascript-upload-a-blob

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function cropAndSave(src, x, y, w, h) {
var canvas = document.createElement("canvas");
//document.body.appendChild(canvas); // for testing
var ctx = canvas.getContext("2d");
canvas.width = w;
canvas.height = h;
ctx.fillRect(0, 0, w, h);
ctx.drawImage(src, -x, -y);
return {
save: function(filename) {
var a = document.createElement("a");
canvas.toBlob(function(blob) {
a.href = URL.createObjectURL(blob);
a.download = filename;
console.log("trying to download",filename);
a.click();
});
}
}
}
$(function() {
let img = $("#cropimage")[0];
let r = $('#results'),
x = $('.cropX', r),
y = $('.cropY', r),
w = $('.cropW', r),
h = $('.cropH', r);
$('#cropimage').cropbox({
width: 200,
height: 200
}).on('cropbox', function(event, results, img) {
x.text(results.cropX);
y.text(results.cropY);
w.text(results.cropW);
h.text(results.cropH);
});
$("#save").on("click", (e) => {
e.preventDefault();
cropAndSave(img,
x.text(),
y.text(),
w.text(),
h.text()
).save("test");
});
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>
<script src="
https://cdn.jsdelivr.net/npm/jquery-cropbox@0.1.3/jquery.cropbox.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/jquery-cropbox@0.1.3/jquery.cropbox.min.css
" rel="stylesheet">
<img id="cropimage" crossorigin="anonymous" alt="" src="http://acornejo.github.io/jquery-cropbox/img.jpg" />
<div id="results"> <b>X</b>: <span class="cropX"></span>
<b>Y</b>: <span class="cropY"></span>
<b>W</b>: <span class="cropW"></span>
<b>H</b>: <span class="cropH"></span>
</div>
<a href="#" id="save">Download</a>

<!-- end snippet -->