Croppie 在 Jquery Fancybox 弹出模式中不起作用答案

【问题标题】：Croppie is Not Working in Jquery Fancybox popup modalCroppie 在 Jquery Fancybox 弹出模式中不起作用
【发布时间】：2018-04-02 15:21:01
【问题描述】：

我曾使用 Jquery Croppie 在弹出模型中要求裁剪或缩放图像，我曾使用 fancybox 在弹出窗口中显示图像，现在我想在弹出模式中制作裁剪图像或缩放图像，但它不起作用了。我已经完成了弹出模式，

<a data-fancybox="gallery" href="{{ asset('public/img/noimage.png') }}" id="fancybox_anchor">
   <div id="profile_pic_div" style="background-image: url('{{ asset('public/img/noimage.png') }}')"></div>
</a>

Popup 模型完美地显示了图像，但现在我想使用croppie 对其进行裁剪、缩放、调整大小我试过了，

$( '.fancybox-image-wrap img' ).croppie({
        enableExif: true,
        viewport: {
            width: 250,
            height: 250,
        },
        type: 'circle',
        boundary: {
            width: 300,
            height: 300
        }
});

当 Popup 打开 Image 父类是 fancybox-image-wrap 这就是为什么我把它作为一个选择器。在正常模式下它的工作，但我怎么能在弹出模型中做到这一点。请帮忙。我完全陷入了困境。

谢谢。

【问题讨论】：

尝试设置touch:false, clickContent:false（对于fancybox）来禁用默认行为。
申请什么？对不起，我没听懂你在说什么。
如果您没有注意到，fancybox 会捕获所有 mousedown、mousemove 等事件以默认启用滑动/拖动。这就是你可以禁用它的方法。
那么它应该可以工作。有点奇怪，但有效 - codepen.io/anon/pen/bvjeLZ?editors=1010

标签： jquery fancybox croppie

【解决方案1】：

这是一个更完整的使用回调来初始化croppie并获取结果的示例：

var myCroopie;

$('[data-fancybox="images"]').fancybox({
  touch: false, 
  clickContent: false,
  animationEffect: false,
  afterLoad : function(instance, current) {
    myCroopie = current.$image.croppie({
    });
  },
  beforeClose : function() {
    myCroopie.croppie('result', 'html').then(function(html) {
      // html is div (overflow hidden)
      // with img positioned inside.
      $("#rez").html(html);
    });
  }
});

演示 - https://codepen.io/anon/pen/bvjeLZ?editors=1010

【讨论】：

非常感谢兄弟...它真的有帮助