RoR: jQuery jCrop, неправильное кадрирование в предварительном просмотре

Я не получаю должной обрезки в предварительном просмотре, а также, когда я сохраняю обрезаемое изображение, оно на самом деле не обрезает изображение.

Когда я пытаюсь перетащить окно обрезки, оно растягивает мое изображение, и мое изображение не остается на одном месте, оно будет двигаться

обрезка окна Это показывает, что изображение предварительного просмотра находится за пределами окна предварительного просмотра.

введите здесь описание изображения Это показывает, что мое изображение для предварительного просмотра растягивается.

Вот мой user.js.coffee

jQuery(document).ready ($) ->
  jQuery ->
    new PicCropper()

  class PicCropper
    constructor: ->
      $('#cropbox').Jcrop
        aspectRatio: 1
        setSelect: [0, 0, 500, 500]
        onSelect: @update 
        onChange: @update

    update: (coords) =>
      $('#user_crop_x').val(coords.x)
      $('#user_crop_y').val(coords.y)
      $('#user_crop_w').val(coords.w)
      $('#user_crop_h').val(coords.h)
      @updatePreview(coords)

    updatePreview: (coords) =>
      $('#preview').css
        width: Math.round(100/coords.w * $('#cropbox').width()) + 'px'
        height: Math.round(100/coords.h * $('#cropbox').height()) + 'px'  
        marginLeft: '-' + Math.round(100/coords.w * coords.x) + 'px'
        marginTop: '-' + Math.round(100/coords.h * coords.y) + 'px'

Вот мой user_controller

  def update
    if params[:user][:password].blank?
      [:password,:password_confirmation,:current_password].collect{|p| params[:user].delete(p) }
    else
      @user.errors[:base] << "The password you entered is incorrect" unless @user.valid_password?(params[:user][:current_password])
    end

    @user = User.find(params[:id])
    if @user.update_attributes(params[:user])
      if params[:user][:profile_pic].present?
        render :crop
      else
        redirect_to @user, notice: "Successfully updated image."
      end
    else
      render :action => 'edit'
    end

Может ли кто-нибудь точно определить, почему я получаю это?

Спасибо

hellomello 30.08.2013 источник

Ответы (4)

arrow_upward
1
arrow_downward

Проблема заключалась в том, что мне нужно было жестко закодировать стиль CSS и сделать ширину и высоту изображения предварительного просмотра равными 0.

hellomello 07.11.2013

comment

Здравствуйте, Андрей, у меня тоже такая же проблема, но я не смог решить ее, используя ваши предложения. не могли бы вы предоставить свой код для Jcrop Спасибо - Nish Rathi; 06.12.2013

arrow_upward
1
arrow_downward

если вы используете бутстрап, вам нужно добавить

img.jcrop {max-width: none}

для вашего css .. каким-то образом бутстрап переопределяет img {max-width: 100%}

для получения дополнительной информации оформите заказ https://github.com/twbs/bootstrap/issues/1649

user1567004 09.02.2014

arrow_upward
0
arrow_downward

Ваши размеры кажутся неправильными: вам следует учитывать изображения с переменными размерами, поэтому я предлагаю вам изучить этот пример jquery, который может быть вам полезен (надеюсь)

Он делает это динамически

    jQuery(function ($) {
        $('.aDimension').each(function () {
            var jcrop_api,
                boundx,
                boundy,
            //updateable coords
                coordX = 0,
                coordY = 0,
                coordH = 0,
                coordW = 0,

            //preset
                currentWidth = $(this).find('.dimensionedAvatar').attr('w'),
                currentHeight = $(this).find('.dimensionedAvatar').attr('h'),

                $loading = $(this).find('.loading'),
                $complete = $(this).find('.complete'),
                $cropItNow = $(this).find('.cropItNow'),
                $controlsPane = $(this).find('.controls-pane'),

            // Grab some information about the preview pane
            $preview = $('#dimensionedAvatar' + currentHeight + '_' + currentWidth),
                $pcnt = $('#dimensionedAvatar' + currentHeight + '_' + currentWidth + ' .preview-container'),
                $pimg = $('#dimensionedAvatar' + currentHeight + '_' + currentWidth + ' .preview-container img'),
                xsize = $pcnt.width(),
                ysize = $pcnt.height();


            $complete.hide();
            $loading.hide();
            $cropItNow.click(function (e) {
                //alert("(" + coordX + "," + coordY + "," + coordH + "," + coordW + ")");

                var cropingUrl = '/Event/CropAvatar' + "/51?x=" + coordX + "&y=" + coordY + "&h=" + coordH + "&w=" + coordW + "&toh=" + currentHeight + "&tow=" + currentWidth;
                $loading.show();
                //alert(cropingUrl);
                $.getJSON(cropingUrl, {}, function (_result) {
                    $loading.hide();
                    $complete.html("Miniature Sauvegardée").show();
                }).fail(function (err) {
                    alert(err);
                });
            });


            //console.log('init',[xsize,ysize]);
            $('#avatarImgContainer' + currentHeight + '_' + currentWidth + ' img').Jcrop({
                onChange: updatePreview,
                onSelect: updatePreview,
                aspectRatio: parseFloat('') > 0 ? parseFloat('') : xsize / ysize
            }, function () {
                // Use the API to get the real image size
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
                // Store the API in the jcrop_api variable
                jcrop_api = this;

                // Move the preview into the jcrop container for css positioning
                // $preview.appendTo(jcrop_api.ui.holder);
            });

            function updatePreview(c) {

                coordX = parseInt(c.x);
                coordY = parseInt(c.y);
                coordH = parseInt(c.h);
                coordW = parseInt(c.w);

                if (parseInt(c.w) > 0) {
                    var rx = xsize / c.w;
                    var ry = ysize / c.h;

                    $pimg.css({
                        width: Math.round(rx * boundx) + 'px',
                        height: Math.round(ry * boundy) + 'px',
                        marginLeft: '-' + Math.round(rx * c.x) + 'px',
                        marginTop: '-' + Math.round(ry * c.y) + 'px'
                    });
                }
            };
        });
    });

HTML

 <fieldset class="fieldset aDimension">
        <legend>Dimension
            252-420</legend>
        <div id="avatarImgContainer252_420" class="left" style="width: 450px;
            height: 260px; margin: 0 4px 14px; padding: 1px; overflow: auto; background: #efefef;
            border: 1px solid #ccf;position: relative;">
            <img src="/uploads/avatars/events/51.png" 
            id="Img1" alt="chargement en cours..." />
        </div>
        <div id="dimensionedAvatar252_420" class="dimensionedAvatar left"
            h="252" w="420" 
            style="display: block; position: relative;z-index: 2000;
            /*top: 10px;right: -280px;*/padding: 6px;border: 1px rgba(0,0,0,.4) solid;background-color: white;
            -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
            -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
            box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);">
            <div class="left preview-container" style="margin: 4px; width: 420px; height: 252px;
                border: 1px solid #ccc; overflow: hidden;">
                <img class="preview" src="/uploads/avatars/events/51.png"
                    alt="img" />
            </div>
            <div class="left controls-pane">
                <input type="button" value="Rogner" class="button cropItNow" />
                <div class="loading">
                    en cours...</div>
                <div class="complete">
                    fait!</div>
            </div>
            <div class="clear">
            </div>
        </div>
        <!--AvatardDimension-->
    </fieldset>
    <div class="clear">
    </div>

    <fieldset class="fieldset aDimension">
        <legend>Dimension
            60-88</legend>
        <div id="avatarImgContainer60_88" class="left" style="width: 450px;
            height: 260px; margin: 0 4px 14px; padding: 1px; overflow: auto; background: #efefef;
            border: 1px solid #ccf;position: relative;">
            <img src="/uploads/avatars/events/51.png" 
            id="Img1" alt="chargement en cours..." />
        </div>
        <div id="dimensionedAvatar60_88" class="dimensionedAvatar left"
            h="60" w="88" 
            style="display: block; position: relative;z-index: 2000;
            /*top: 10px;right: -280px;*/padding: 6px;border: 1px rgba(0,0,0,.4) solid;background-color: white;
            -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
            -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
            box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);">
            <div class="left preview-container" style="margin: 4px; width: 88px; height: 60px;
                border: 1px solid #ccc; overflow: hidden;">
                <img class="preview" src="/uploads/avatars/events/51.png"
                    alt="img" />
            </div>
            <div class="left controls-pane">
                <input type="button" value="Rogner" class="button cropItNow" />
                <div class="loading">
                    en cours...</div>
                <div class="complete">
                    fait!</div>
            </div>
            <div class="clear">
            </div>
        </div>
        <!--AvatardDimension-->
    </fieldset>
    <div class="clear">
    </div>

    <fieldset class="fieldset aDimension">
        <legend>Dimension
            68-152</legend>
        <div id="avatarImgContainer68_152" class="left" style="width: 450px;
            height: 260px; margin: 0 4px 14px; padding: 1px; overflow: auto; background: #efefef;
            border: 1px solid #ccf;position: relative;">
            <img src="/uploads/avatars/events/51.png" 
            id="Img1" alt="chargement en cours..." />
        </div>
        <div id="dimensionedAvatar68_152" class="dimensionedAvatar left"
            h="68" w="152" 
            style="display: block; position: relative;z-index: 2000;
            /*top: 10px;right: -280px;*/padding: 6px;border: 1px rgba(0,0,0,.4) solid;background-color: white;
            -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
            -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
            box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);">
            <div class="left preview-container" style="margin: 4px; width: 152px; height: 68px;
                border: 1px solid #ccc; overflow: hidden;">
                <img class="preview" src="/uploads/avatars/events/51.png"
                    alt="img" />
            </div>
            <div class="left controls-pane">
                <input type="button" value="Rogner" class="button cropItNow" />
                <div class="loading">
                    en cours...</div>
                <div class="complete">
                    fait!</div>
            </div>
            <div class="clear">
            </div>
        </div>
        <!--AvatardDimension-->
    </fieldset>

Bellash 25.10.2013

arrow_upward
0
arrow_downward

Ознакомьтесь с новой версией JCrop https://github.com/maxd/jcrop-rails-v2

Pratik Khadloya 01.12.2013

RoR: jQuery jCrop, неправильное кадрирование в предварительном просмотре

Ответы (4)

Похожие вопросы