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

Question

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();

Answer 1

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>

Answer 2

I think you are using jQuery new version while it is supporting old version.

 var image = document.getElementById('image'); var cropper = new Cropper(image, { aspectRatio: 16 / 9, crop: function(e) { console.log(e.detail.x); console.log(e.detail.y); } });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.0/cropper.min.css" rel="stylesheet"/> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.0/cropper.min.js"></script> <img id="image" src="https://lh5.googleusercontent.com/-_nU33sjf1SI/AAAAAAAAAAI/AAAAAAAASgQ/VOkKnOIxP8g/photo.jpg?sz=328" />

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

Question

2 answers

solution1
2 ACCPTED 2020-01-14 06:12:31

solution2
1 2020-01-14 06:17:31

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

Question

2 answers

solution1 2 ACCPTED 2020-01-14 06:12:31

solution2 1 2020-01-14 06:17:31

solution1
2 ACCPTED 2020-01-14 06:12:31

solution2
1 2020-01-14 06:17:31