How do I initialize the fengyuanchen jQuery cropper plugin?

Question

In my web application, I am trying to implement a profile picture upload which allows you to crop your image once it is uploaded. To do this, I am using the jQuery cropper plugin found here: http://fengyuanchen.github.io/cropper/

The problem is, I just can't get it to initialize! In the documentation, it states:

Initialize with $.fn.cropper method.

I am not sure what this means, however I know it is important because with my current code:

$('#profile-image').cropper({
  aspectRatio: 1 / 1,
  crop: function(e) {
    // Output the result data for cropping image.
    console.log(e.x);
    console.log(e.y);
    console.log(e.width);
    console.log(e.height);
    console.log(e.rotate);
    console.log(e.scaleX);
    console.log(e.scaleY);
  }
});

I am greeted with the error:

TypeError: $(...).cropper is not a function

Any help is appreciated! I understand that I am most likely missing some fundamental understanding of JS and jQuery.

Answer 1

Check attentively your scripts order. From documentation from github it says

Installation

Include files:

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

So the first idea is that in your code the cropper included before jQuery or your script to call cropper executed(included) before cropper script