I'm using cropper.js and when I try to initialize, i get the error Uncaught TypeError: image.cropper is not a function at FileReader.oFReader.onload. I have copied the code from one last project I did, and in that project it works normally.
I have tried both of cropper and cropper.js and nothing works. And I inport the cropper to html like this the the head of the document.
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/cropperjs/dist/cropper.js"></script>
<link href="node_modules/cropperjs/dist/cropper.css" rel="stylesheet">
<script src="node_modules/jquery-cropper/dist/jquery-cropper.js"></script>
My form is like this with the other fields in it.
<form action="backend/send.php" method="post">
...(more html with the other fields)
<p>Imagem Cabeçalho:<br>
<label class="form-filebutton">Carregar Imagem
<input type="file" id="imagem" name="imagem" accept="image/png, image/jpeg, image/JPEG, image/jpeg2000, image/jpg, image/gif">
</label>
</p>
...(more html with the other fields)
</form>
The image should appear here.
<div class="div-preview hidden">
<img class="img-preview" id="img-preview">
...(more html with buttons to edit the image)
</div>
Here is what I do to initialize Cropper.
$(function() {
var image = $("#img-preview"); //where the image should appear
//Initialize cropper when image is loaded in the form
$("input:file").change(function() {
$(".div-preview").removeClass("hidden"); //show the elements
var oFReader = new FileReader();
oFReader.readAsDataURL(this.files[0]);
oFReader.onload = function (oFREvent) {
image.cropper("destroy"); //In case I change the image
image.attr("src", this.result);
image.cropper({
aspectRatio: 1 / 1,
viewMode: 1,
toggleDragModeOnDblclick: false,
dragMode: "move",
crop: function(e) {}
});
};
});
...(more jQuery and JavaScript to control the buttons)
});
I'm expecting to open the cropper but I get the error Uncaught TypeError: image.cropper is not a function at FileReader.oFReader.onload in the first cropper (image.cropper("destroy");).
