Кроппер не инициализирует второй раз - PullRequest
Новая
       33

Кроппер не инициализирует второй раз

0 голосов
/ 06 марта 2020

При первом запуске моей программы все работает хорошо, но когда я go выбираю другой локальный рисунок с вводом файла, Cropper не работает. Что я делаю не так?

JS: 

(function($) {
    let avatar = {
        init: function(config) {
            $this = this;
            this.config = config;
            this.loadCropper()
            this.bindEvents();
        },
        bindEvents: function() {
            $this = this;
            this.config.file.change(this.configPreview);

        },
        configPreview: function() {
            $this.destractorCropper()
            $this.file = this.files[0];
            let reader = new FileReader();
            reader.onload = () => $this.config.preview.attr('src', reader.result);
            reader.readAsDataURL($this.file);
            $this.loadCropper();
        },
        loadCropper: function() {
            this.config.preview.cropper({
                aspectRatio: 1,
            });

            // Get the Cropper.js instance after initialized
            this.cropper = this.config.preview.data('cropper');
        },
        destractorCropper: function() {
            $this.cropper.destroy();
            $this.cropper = null;
        }
    };

    avatar.init({
        file: $('.file'),
        preview: $('#preview')
    });
})(jQuery)

HTML: 

<input type="file" class="file">

<div>
    <img id="preview" src="http://uupload.ir/files/tpsc_m-blog-1.jpg" alt="image">
</div>
...