限制用户在使用 wordpress 媒体编辑器选择特色图像时裁剪图像

Posted 2023-03-29

【中文标题】限制用户在使用 wordpress 媒体编辑器选择特色图像时裁剪图像

【英文标题】：Restrict user to crop image on selecting featured image using wordpress media editor

【发布时间】：2020-01-23 17:16:54

【问题描述】：

我试图限制用户仅以 2:1 或 6:9 等宽高比选择特色图像，为此我试图找到任何在选择特色图像后运行但找不到任何内容的 Wordpress 钩子，是否有任何钩子或脚本，所以我可以在选择帖子特征图像后调用 wp.media 的“裁剪图像”功能。

就像 favicon 一样，当我们选择任何图像作为 favicon 时，它会强制用户在自定义区域中选择图像时以 1:1 的比例裁剪图像

我尝试使用自定义代码，但无法正常工作

【问题讨论】：

如果您想要一个告诉您如何执行此操作的答案，我们需要查看您的代码。但是，假设用户在input type="file" 控件中选择图像，那么您可以在cropping it 之前轻松地将read the file data and load it in to an <img /> tag 到ascertain its dimensions

@RoryMcCrossan，我提到了标签，我正在使用 wordpress 管理面板，我正在寻找任何 wordpress 钩子。

【参考方案1】：

您想要的是add_image_size - 这将允许您添加自己的图像尺寸（如“宽屏”或“2x1”）并设置自己的尺寸和纵横比（包括裁剪）。然后，当您希望图像出现时，您调用 您的 图像大小。

Here's a whole bunch of info/examples on how to use it.

【参考方案2】：

我试图找到任何钩子来限制用户仅以预期的纵横比上传特色图像，但我做不到，但它是由 jQuery 和 wp.media 库完成的，首先我用 jquery 检查了图像比例，然后使用下面的代码打开图像编辑器弹出窗口来编辑图像，这是我的代码 sn-p:-

$(document).on('click','#edit-thumb-ratio',function(e)
        e.preventDefault();

        feature_uploader = wp.media.featuredImage.frame();

        feature_uploader.on('open', function() 
            var selection = feature_uploader.state().get('selection');
            $('.media-frame-content').append('<div class="imgedit-wait" id=""></div>')
                      //   //remove all the selection first
            selection.each(function(image) 
                var attachment = wp.media.attachment( image.attributes.id );
                attachment.fetch();
                selection.remove( attachment ? [ attachment ] : [] );
            );

                      //   //add back current selection, in here let us assume you attach all the [id] to <div id="my_file_group_field">...<input type="hidden" id="file_1" .../>...<input type="hidden" id="file_2" .../>
            $("#postimagediv").find('input[type="hidden"]').each(function()
                 var input_id = $(this);
                if( input_id.val() )
                    attachment = wp.media.attachment( input_id.val() );
                    attachment.fetch();
                    selection.add( attachment ? [ attachment ] : [] );
                
            );
            $('.imgedit-wait').show();
                setTimeout(function()
                        $('.attachment-info .edit-attachment').trigger('click');
                ,1000);                    
        );
        feature_uploader.on('select', function() 
            delete feature_uploader;
        );
        feature_uploader.open();
    );