javascriptcropperjscropper

Uncaught TypeError: $(...).cropper is not a function - cropper.js


I tried the tutorial at this link

My code is

<!DOCTYPE html>
<html>
<head>    
<link href="cropper.css" rel="stylesheet" />
</head>
<body>
<img id="teh" src="image.png" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="cropper.js"></script>
<script>        
    $("#teh").cropper();
</script>
</body>
</html>

But, it hits error Uncaught TypeError: $(...).cropper is not a function at $("#teh").cropper();


Solution

  • Found the solution already. I need to add

    <script src="jquery-cropper.js"></script>
    

    so, it becomes

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="cropper.js"></script>
    <script src="jquery-cropper.js"></script>