fengyuanchen cropper frame on button点击

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中

我可以尝试使用$.load事件处理程序如下图所示设置图像

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

Answer 1

：

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