0

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: enter image description here

Pradeep
  • 159
  • 2
  • 2
  • 7
  • Why use an anchor element when a button is more appropriate here? https://www.w3.org/MarkUp/1995-archive/Elements/A.html vs https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html – Mark Schultheiss Jun 02 '23 at 11:59

1 Answers1

1

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 How can javascript upload a blob?

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");
  });
});
<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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236