Estoy tratando de recortar la imagen antes de cargarla y estoy usando el complemento Croppie.js, pero no sé. Obtengo "Error de tipo no detectado: $(...).croppie no es una función " este error en la consola .

Traté de usar este complemento al final del archivo justo antes del cuerpo y también probé en la cabeza y entre el html, pero recibo el mismo error. No sé por qué sucede esto.

Aquí está mi código.

 <script src="jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script> <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/croppie/croppie.css" /> <script type="text/javascript"> $(document).ready(function(){ $image_crop = $('#upload-image').croppie({ enableExif: true, viewport: { width: 200, height: 200, type: 'square' }, boundary: { width: 300, height: 300 } }); $('#userPhoto').on('change', function () { var reader = new FileReader(); reader.onload = function (e) { $image_crop.croppie('bind', { url: e.target.result }).then(function(){ console.log('jQuery bind complete'); }); } reader.readAsDataURL(this.files[0]); }); $('#crop').on('click', function (ev) { $image_crop.croppie('result', { type: 'canvas', size: 'viewport' }).then(function (response) { $.ajax({ url: "upload.php", type: "POST", data: {"image":response}, success: function (data) { html = '<img src="' + response + '" />'; $("#upload-image-i").html(html); } }); }); }); }); </script>

Probé todo el código en un solo archivo y funciona bien allí.