我不能使用 JQuery 插件 Croppie。获取“croppie 不是函数”错误

Question

我正在尝试在上传之前裁剪图像，我正在使用 Croppie.js 插件，但我不知道我得到了“未捕获的类型错误：$(...).croppie 不是函数“控制台中出现此错误。

我尝试在正文之前的文件末尾使用此插件，并尝试在头部和 html 之间使用，但我遇到了同样的错误。我不知道为什么会这样。

这是我的代码。

<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>

我已经在一个文件中尝试了所有代码，并且在那里工作正常。

Answer 1

我遇到了同样的问题。检查CDN。

你必须使用两个链接（croppie.css 和 croppie.min.js）到您尝试上传图片的页面。

内容分发网络

https://cdnjs.com/libraries/croppie