Question

我使用PrestaImageBundle为Symfony 3（以及用于上传图像的VichUploader）实现了jQuery Cropper模块，我在尝试上传时出现此错误。它似乎指向这个功能，当它试图创建模态以裁剪上传的图像时：

   /**
     * Open cropper "editor" in a modal with the base64 uploaded image.
     *
     * @param {string} base64
     */
    Cropper.prototype.prepareCropping = function(base64) {
        var self = this;

        // clean previous croppable image
        this.$container.$preview.children('img').cropper('destroy').remove();

        // reset "aspectRatio" buttons
        this.$aspectRatio.each(function() {
            var $this = $(this);

            if ($this.val().length <= 0) {
                $this.trigger('click');
            }
        });

        this.$modal
            .one('shown.bs.modal', function() {
                // (re)build croppable image once the modal is shown (required to get proper image width)
                $('<img>')
                    .attr('src', base64)
                    .on('load', function() {
                        $(this).cropper(self.options);
                    })
                    .appendTo(self.$container.$preview);
            })
            .modal('show');
    };

我使用npm install cropper（即依赖于jQuery的那个）安装了cropper库，并且在PrestaImageBundle cropper.js文件之前包含了here，但是我看不出是什么问题，因为其他一切似乎都有效，配置是正确的，按钮出现并允许我选择一个图像 - 一旦我从计算机中选择了图像，它就无法生成模态。

如果有其他人遇到过这个问题，请帮助我，因为我真的觉得这个捆绑是我需要的东西，而且我一直在寻找一些东西，所以如果我不能让它工作的话会很遗憾。

编辑：

初始化Cropper：

(function(w, $) {

'use strict';

$(function() {
    $('.cropper').each(function() {
        new Cropper($(this));
    });
});

})(window, jQuery);

js包含在基本文件中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="{{ asset('assets/jquery-ui/jquery-ui.min.js') }}" type="text/javascript" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="{{ asset('cropper/dist/cropper.min.js') }}"></script> {# from the offcial cropper repo #}
<script src="{{ asset('assets/js/cropper.js') }}"></script> {# PrestaImageBundle's modifications where this.$modal is called #}

cropper.js initElements函数：

Cropper.prototype.initElements = function() {
    this.$modal = this.$el.find('.modal');
    this.$aspectRatio = this.$modal.find('input[name="cropperAspectRatio"]');
    this.$input = this.$el.find('input.cropper-base64');

    this.$container = {
        $preview: this.$modal.find('.cropper-preview'),
        $canvas: this.$el.find('.cropper-canvas-container')
    };

    this.$local = {
        $btnUpload: this.$el.find('.cropper-local button'),
        $input: this.$el.find('.cropper-local input[type="file"]')
    };

    this.$remote = {
        $btnUpload: this.$el.find('.cropper-remote button'),
        $uploadLoader: this.$el.find('.cropper-remote .remote-loader'),
        $input: this.$el.find('.cropper-remote input[type="url"]')
    };

    this.options = $.extend(this.options, {
        aspectRatio: this.$aspectRatio.val()
    });

    return this;
};

图片上传的表单类型：

$builder->add('imageFile', ImageType::class, array(
    'upload_mimetype' => 'image/jpeg',
    'download_link' => false
));

Twig模板，格式为：

{{ form_start(image_form) }}

<div class="row">
    <div class="col-xs-12 col-sm-6">
        <div class="form-group">
            {{ form_widget(image_form.imageFile, { 'class': 'cropper' }) }}
        </div>
    </div>
</div>

{{ form_end(image_form) }}

其他编辑：仔细查看文档，我认为它应该是this.$modal.on()而不是this.$modal.one()，但即使更改此内容仍会导致同样的问题。

这个.modal.one（...）。modal不是一个函数Cropper - Symfony 3

0 个答案: