Question

我想在叠加页面中使用Croppie库。第一步，我想在此叠加页面中设置上传部分。我为此添加了一个上传按钮。这是我的代码：

class BE_ImageEditor {
constructor() {
this.addMyHTML();
this.body = $("#js-image-editor-overlay");
this.editBtn = this.body.find(".icon");
this.bannerEditBtn = $("#banner-edit-icon");
this.saveBtn = $("#saveBtn");
this.uploadImageBtn = $("#uploadBtn");

//initialise Croppie
var c = new Croppie(document.getElementById('js-image-editor-overlay'), 'viewport');


this.events();
} 


events(){
this.editBtn.on("click",this.openOverlay.bind(this));
this.bannerEditBtn.on("click",this.openOverlay.bind(this));
this.uploadImageBtn.on("click",this.uploadImage.bind(this));
}

从这里开始，我从Croppie库中的demo文件中复制代码

uploadImage() {
    var $uploadCrop;

    function readFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#js-image-editor-overlay').addClass('ready');
                $uploadCrop.croppie('bind', {
                    url: e.target.result
                }).then(function(){
                    console.log('jQuery bind complete');
                });

            }

            reader.readAsDataURL(input.files[0]);
        }
        else {
            swal("Sorry - you're browser doesn't support the FileReader API");
        }
    }


$uploadCrop = $('#js-image-editor-overlay').croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: 'circle'
    },
    boundary: {
        width: 300,
        height: 300
    }
});



    $('#uploadBtn').on('change', function () { readFile(this); });
    $('#saveBtn').on('click', function (ev) {
        $uploadCrop.croppie('result', {
            type: 'canvas',
            size: 'viewport'
        }).then(function (resp) {
            popupResult({
                src: resp
            });
        });
    });
 }

以下是叠加页面的代码：

openOverlay(){
this.body.addClass("overlay--active");
this.body.html()
}
closeOverlay(){
this.body.removeClass("overlay--active");
}

// methods


addMyHTML(){
// overlay--active
$("body").append(`
  <div class="overlay" id="js-image-editor-overlay">

       <div class="content-holder" style="width: 50%">
       <a class="button-link z-dir double leftside" id="uploadBtn"><i class="fas fa-cloud-upload-alt"></i> Upload</a>
       <a class="button-link z-dir double rightside high-alert"><i class="fas fa-times"></i> Cancel</a>
       <a class="button-link z-dir double rightside" id = "saveBtn"><i class="far fa-save"></i> Save</a>
       </div>


  </div>
  `);
}
}

现在，当我点击上传按钮时：出现此错误：

TypeError: undefined is not a function (near '...(0, _jquery.default)('#js-image-editor-overlay').croppie...')

任何人都可以帮助我，我是javascript初学者。

在Croppie上传图片

0 个答案: