Question

嗨，我正在尝试使用jQuery Guillotine在我的网站上裁剪用户头像，但我需要包装容器为方形，而不是矩形，它需要1：1的宽高比。（实际上是使用border-radius的圆圈：50％; 但我说的是宽高比而不是形状）

但是当我改变了html时，我的图像以奇怪的方式调整大小，似乎新图像被父容器扭曲了。

问题是，如何将jQuery断头台与方形容器父级一起使用？

这是jsFiddle：https://jsfiddle.net/gbpt8c1x/

<div class="some-parent">
  <input class="file-input" class="is-hidden" type="file" name="file" id="file-input" accept="image/*">
  <div class="avatar-widget only" data-msg="Change Picture" data-is-editing="false">
    <figure>
      <img src="http://lorempixel.com/512/512/people/" id="user-avatar">
    </figure>
  </div>

        var picture = jQuery('#user-avatar');

    function readURL(input, output) {

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

        reader.onload = function(e) {
          jQuery("#user-avatar").data("old-src", jQuery("#user-avatar").attr('src'));
          jQuery("#user-avatar").attr('src', e.target.result);
          picture.trigger('load');
        }

        reader.readAsDataURL(input.files[0]);
      }
    }

    function cropBefore(objectInput) {

      var widgetStatus = jQuery(".avatar-widget").data("is-editing");

      if (widgetStatus == false) {
        //Open up the file input
        jQuery("#file-input").trigger('click');

        //Read the image from the opened input
        readURL(jQuery("#file-input"), "#user-avatar");


        //Remove the static class cuz we're using guillotine who has his own CSS class
        jQuery(".avatar-widget").removeClass("only");

        //Load the Guillotine JS
        //loadGuillotine();

        //Set the widget status to true "Is editing"
        jQuery(".avatar-widget").data("is-editing", true);
      }

    }

    function resetWidget() {
      jQuery("#user-avatar").attr('src', jQuery("#user-avatar").data("old-src"));
      jQuery(".avatar-widget").addClass("only");
      picture.guillotine('remove');
      jQuery(".avatar-widget").data("is-editing", false);
    }

    jQuery(document).ready(function() {


      if (!picture.data('bindedWidget')) {
        picture.data('bindedWidget', true);
        //Add click event listener to our widget
        jQuery(".avatar-widget").bind("click", function() {
          cropBefore(jQuery("#file-input")); //the file input element

        });
        //Watch for any changes on the file input
        jQuery("#file-input").change(function() {
          readURL(this, "#user-avatar");
        });
      }
      picture.on('load', function() {

        if (jQuery(".avatar-widget").data("is-editing") == true) {

          // Remove any existing instance of the plugin
          // Initialize plugin (with custom event)
          if (picture.guillotine('instance')) {
            picture.guillotine('remove');
          }

          picture.guillotine({
            eventOnChange: 'guillotinechange'
          });

          // Display inital data
          var data = picture.guillotine('getData');
          for (var key in data) {
            jQuery('#' + key).html(data[key]);
          }

          // Bind buttons, only the first time!
          if (!picture.data('bindedBtns')) {
            alert("only once");
            picture.data('bindedBtns', true);
            jQuery('#rotate_left').click(function() {
              picture.guillotine('rotateLeft');
            });
            jQuery('#rotate_right').click(function() {
              picture.guillotine('rotateRight');
            });
            jQuery('#fit').click(function() {
              picture.guillotine('fit');
            });
            jQuery('#zoom_in').click(function() {
              picture.guillotine('zoomIn');
            });
            jQuery('#cancel').click(function() {
              resetWidget();
            });
          }

          // Update data on change
          picture.on('guillotinechange', function(ev, data, action) {
            data.scale = parseFloat(data.scale.toFixed(4));
            for (var k in data) {
              jQuery('#' + k).html(data[k]);
            }
            console.log(data.scale);
          });
        }

      });


    });

Answer 1

我想出了如何解决这个问题。基本上你只需要在断头台初始化时传递相同的宽度和高度。

像这样：

picture.guillotine({width: 512, height: 512, eventOnChange: 'guillotinechange', zoomStep: 0.1, init: { scale: 1 } });

这是相同的 Fiddle，但已更新：

https://jsfiddle.net/tj2s45dy/

Answer 2

需要随处更换

border-radius :50%

要
border-radius: 0%

jQuery断头台 - 化身的方形容器

2 个答案: