Question

我在wordpress环境中使用fengyuanchen cropper插件。如果图像标记中有图像，该插件可以使用。

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

我尝试了多种方式，但似乎没有任何工作例如

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'));}
});

Answer 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
                });
            }
        });
    }
});

Answer 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');
                              }
                            });

点击按钮上的fengyuanchen cropper框架

2 个答案: