WordPress Media Library Crop image on Header Image Cropper插入

Question

我正在使用一个WordPress插件，该插件需要强制用户上传的图像具有非常特定的比例，并且理想情况下，尺寸为1024 X 350可以在页面标题中使用。在Customizer中，由wp.media（https://codex.wordpress.org/Javascript_Reference/wp.media）提供的WordPress标头图片上传器具有很多功能，这些功能与我所寻找的方式完全相同：

用户单击按钮以调出媒体模式：

用户选择他们的图像，然后单击“选择并裁剪”

用户然后将媒体模态中的图像裁剪到所需的尺寸，但媒体模态始终保持相对于所需裁剪的图像比例。

单击“裁剪”，然后退出媒体模式，并在媒体库中创建图像的副本，并提供裁剪后的版本以供页面使用。

问题是：可以使用wp_media对话框将此代码/流重新用于在任何图像上工作吗？

Answer 1

将图像插入帖子或页面时，WordPress 媒体库没有内置图像裁剪工具。但是，您可以使用插件或自定义代码来添加此功能。

“Header Image Cropper”插件是一种流行的插件，允许您在插入时裁剪图像。该插件向媒体库上传器添加了一个裁剪工具，用于选择标题图像。但是，您可以修改插件代码以使其适用于所有图像。

以下是修改“Header Image Cropper”插件的步骤：

安装并激活“标题图像裁剪器”插件。打开位于插件目录 (wp-content/plugins/header-image-cropper/js) 中的文件“header-image-cropper.js”。替换以下代码：

media.view.HeaderImageCropper = media.View.extend({
    // ...
});

用这个代码：

media.view.HeaderImageCropper = media.View.extend({
    initialize: function() {
        var self = this;
        this.listenTo(this.controller, 'imageDetails', function(){
            if ( 'image' === self.controller.get('selection').first().get('type') ) {
                self.cropper = new Cropper( self.$('.attachment-details .thumbnail'), {
                    aspectRatio: 16 / 9,
                    crop: function(event) {
                        var imageData = self.cropper.getData();
                        self.controller.trigger('updateDetails', {
                            cropDetails: {
                                x: imageData.x,
                                y: imageData.y,
                                width: imageData.width,
                                height: imageData.height
                            }
                        });
                    }
                });
            }
        });
    },
    // ...
});

此代码修改了“Header Image Cropper”插件，为所有图像添加裁剪工具，而不仅仅是标题图像。它使用“Cropper.js”库创建裁剪界面，并在插入图像时将裁剪详细信息发送到图像详细信息表单。

保存文件并通过将图像插入帖子或页面来测试修改后的插件。通过修改“Header Image Cropper”插件，您可以向 WordPress 媒体库上传器添加裁剪工具，并更轻松地在插入时裁剪图像。