fengyuanchen 裁剪框点击按钮答案

【问题标题】：fengyuanchen cropper frame on button clickfengyuanchen 裁剪框点击按钮
【发布时间】：2015-10-05 10:40:27
【问题描述】：

我在 wordpress 环境中使用 fengyuanchencropper 插件。如果图像标签中有图像，该插件将起作用。

我需要的是，如果我动态设置裁剪控件应该显示的图像（矩形）

我尝试了多种方法，但似乎没有任何效果例如

if($(".attachment-post-thumbnail").attr('src')!=""){
 $('.cropper_Menu1 > img').cropper({
              aspectRatio: 180/293,
              autoCropArea: 1,
              strict: false,
              guides: true,
              highlight: true,
              dragCrop: false,
              cropBoxMovable: false,
              cropBoxResizable: false
            });
}

有什么帮助吗？不擅长jquery

我正在设置图像

$('.inside').bind('DOMNodeInserted DOMNodeDeleted', function(event)  { 
   if($(".attachment-post-thumbnail").attr('src')!=""){
        $("#MenuImg").attr('src',$(".attachment-post-thumbnail").attr('src'));}
});

【问题讨论】：

如何动态设置图像。能否请您也分享该代码。

标签： jquery crop

【解决方案1】：

您可以尝试使用$.load 事件处理程序，如下所示：

$('.inside').bind('DOMNodeInserted DOMNodeDeleted', function(event)  { 
   if($(".attachment-post-thumbnail").attr('src')!=""){
        $("#MenuImg").attr('src',$(".attachment-post-thumbnail").attr('src')).load(function() {
        // Handler for .load() called.
        if($(".attachment-post-thumbnail").attr('src')!=""){
             $('#MenuImg').cropper({
                          aspectRatio: 180/293,
                          autoCropArea: 1,
                          strict: false,
                          guides: true,
                          highlight: true,
                          dragCrop: false,
                          cropBoxMovable: false,
                          cropBoxResizable: false
                });
            }
        });
    }
});

【讨论】：

代码有效，这种方法的问题是我有 5 个不同的部分要裁剪。所以复制代码是一个问题。无论如何谢谢你

【解决方案2】：

我想通了。如果有其他更好的解决方案请发布。添加构建功能

   $('.cropper_Menu1 > img').cropper({
                            aspectRatio: 180/293,
                              autoCropArea: 1,
                              strict: false,
                              guides: true,
                              highlight: true,
                              dragCrop: false,
                              cropBoxMovable: false,
                              cropBoxResizable: false,
                              built: function () 
                              {
                                        $(this).cropper('crop');
                              }
                            });

【讨论】：