0

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

   /**
     * 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 文件之前，如此处所述，但我看不出问题出在哪里，因为其他一切似乎都有效，配置是正确的并且该按钮出现并允许我选择一个图像 - 一旦我从我的计算机中选择了图像，它就无法生成模态。

如果其他人遇到此问题，将不胜感激，因为我真的认为这个捆绑包是我需要的，而且我一直在寻找一些东西，所以如果我不能让它工作，那就太可惜了。

编辑：

初始化裁剪器：

(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()即使改变它仍然会导致同样的问题。

4

0 回答 0