没有定义

Question

我正在使用带有引导模式的 Croppie，但我在浏览器控制台中收到以下错误，这意味着当我单击裁剪按钮时，错误如下：引用错误： 未定义 outWHeight这是我的Js代码（虽然你可以在CodePen链接中找到完整的代码）：

var $uploadCrop,
        tempFilename,
        rawImg,
        imageId;
        function readFile(input) {
            if (input.files && input.files[0]) {
              var reader = new FileReader();
                reader.onload = function (e) {
                    $('.upload-demo').addClass('ready');
                    $('#cropImagePop').modal('show');
                    rawImg = e.target.result;
                }
                reader.readAsDataURL(input.files[0]);
            }
            else {
                swal("Sorry - you're browser doesn't support the FileReader API");
            }
        }
        $uploadCrop = $('#upload-demo').croppie({
            viewport: {
                width: 250,
                height: 250,
            },
            enforceBoundary: false,
            enableExif: true
        });
        $('#cropImagePop').on('shown.bs.modal', function(){
            // alert('Shown pop');
            $uploadCrop.croppie('bind', {
                url: rawImg
            }).then(function(){
                console.log('jQuery bind complete');
            });
        });
        $('.item-img').on('change', function () { imageId = $(this).data('id'); tempFilename = $(this).val();
                                                                                         $('#cancelCropBtn').data('id', imageId); readFile(this); });
        $('#cropImageBtn').on('click', function (ev) {
            $uploadCrop.croppie('result', {
                type: 'base64',
                format: 'jpeg',
                size: {width: 1000, height: 1000}
            }).then(function (resp) {
                $('#item-img-output').attr('src', resp);
                $('#cropImagePop').modal('hide');
            });
        });

Answer 1

你的代码没有问题，并更新项目中使用的所有库。另外，使用以下 Croppie 库，即替换它：

https://foliotek.github.io/Croppie/croppie.js