65.9K
CodeProject 正在变化。 阅读更多。
Home

WordPress 中的图像处理

emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2014年9月10日

CPOL

5分钟阅读

viewsIcon

19722

在 WordPress 中处理图像的能力已经取得了长足的进步,但对开发人员来说仍然是一个挑战。1&1 的 WordPress 专家 Marko Heijnen 正在通过开发插件和 WordPress 核心来扩展这项功能。

引言

WordPress 3.5 对图像处理进行了彻底的改造。自发布以来,开发人员在增强平台功能方面拥有了更大的灵活性。这为扩展 WordPress 生成图像尺寸的方式提供了一种非常强大的方法。

在 3.5 版本之前,WordPress 的代码库中分散了大量相同的代码。如果开发人员无法准确记住图像最后一次被处理的位置,图像可能会以不同的方式保存。这些问题在 WordPress 3.5 中得到了解决,当时开发人员将 GD 代码从核心中抽象出来,并过渡到使用几个新类。WP_Image_Editor 成为主要的共享方法类,而 WP_Image_Editor_GD 现在包含了 WordPress 以前的所有代码。

目前是这样的

// Return an implementation that extends <tt>WP_Image_Editor</tt>
$image = wp_get_image_editor( 'cool_image.jpg' );

if ( ! is_wp_error( $image ) ) {
    $image->rotate( 90 );
    $image->resize( 300, 300, true );
    $image->save( 'new_image.jpg' );
}

由于 GD 被抽象出来,因此可以轻松集成 Imagick 支持。使用 Imagick 可以获得更好的图像质量,所有在其 Web 主机上可用的用户默认都会添加 Imagick 支持。这在处理具有扩展颜色配置文件的图像时尤为重要。如果不支持 Imagick 的函数不可用,WordPress 将再次默认回 GD。代码的编写方式允许开发人员集成自己的图像处理引擎或扩展现有的引擎。

另一个巨大的优势是,通过添加一个简单的函数调用:wp_get_image_editor( 'cool_image.jpg' );,就可以在自定义插件或主题中直接使用新类。还可以通过调用:wp_image_editor_supports($args) 来检查现有编辑器是否支持某种 mime 类型或方法。有关这些函数发布的更多信息可以在 WordPress.org 上找到。近两年来,开发人员一直在构建这些功能。

这对社区意味着什么

典型的 WordPress 用户可能不知道这段代码,因此这对他们来说并没有特别大的帮助。到目前为止,只有少数插件被创建来利用图像处理的强大功能。这些插件完全依赖于 WordPress 代码,而不是第三方库。在过去的两年里,我构建了多个插件来展示 WP_Image_Editor 的强大功能。其中一些插件采用了 gmagick 图像编辑器和改进的 GD 编辑器。然而,它们尚未被开发人员广泛使用。

我曾参与的一个具体项目是 WP_Image。这个类代表了一个 WordPress 媒体项。如果这个项是一张图片,就可以创建新的图片尺寸、覆盖现有的尺寸、调用 WP_Image_Editor 并根据您的规格进行修改。下面的示例创建一个新的图片尺寸,并以类似于 WordPress add_image_size() 函数的方式存储它。开发人员会发现使用这种方法更容易,但仍有改进的空间。

$image = new WP_Image(313);
$image->add_image_size( ‘slider’, 900, 200, true );

这段代码通过减少存储在上传文件夹中的图像数量来提供帮助。如果您的滑块只有六张图片,就没有必要生成成千上万张永远不会被使用的图片。

解决方案

为了让开发人员在图像处理方面拥有更大的权力,需要审查 add_image_size() 函数。这个强大的函数允许开发人员确定图像的名称、宽度、高度以及任何需要裁剪的区域。只有在尝试进行更高级的处理时,才会显现出此函数的局限性。

我目前正在将我的所有代码整合到一个 WordPress 插件中。该插件被恰当地命名为 Improved Image Editor,可以在 WordPress.orgGitHub 上找到。它目前专注于 API 方面,这对开发人员来说尤其有用。通过这个插件增强 WordPress 安装,用户已经可以添加更多的图像编辑功能。

设置图片尺寸的质量

Improved_Image_Editor::register_image_size_info( ‘medium’, array( ‘quality’ => 20 );

设置图片尺寸的缩放

Improved_Image_Editor::register_image_size_info( ‘medium’, array( ‘zoom => 2 );

在图片尺寸上设置滤镜

Improved_Image_Editor::register_image_size_info( ‘medium’, array( ‘filters’ => array(‘grayscale’) );

虽然它已经具备了一些出色的功能,但我将始终认为这个插件是一个正在进行中的项目,新的功能会不断添加。滤镜的范围很快就会扩大,从而在 WordPress 中提供更高级的处理。我通过覆盖 WP_Image_Editormulti_resize() 方法来实现这一功能。该方法本质上与其原始版本相同,但现在可以调用两个方法。

第一个调用更改尺寸数组。目前,这仅在添加带有缩放的滤镜时才需要。为此,它会覆盖 image_resize_dimensions() 函数。

第二个方法允许在图像对象上调用其他方法。它会检查图像信息,并可以调用 set_quality() 方法或滤镜方法。为了让事情变得更简单,滤镜方法需要加上 filter_ 前缀。

如何手动安装插件

Improved Image Editor 插件可以通过仪表板搜索选项轻松地从 WordPress 目录安装。但是,如果您想手动安装,请按照以下说明操作:

  1. GitHubWordPress.org 下载插件。
  2. 在您的 WordPress 仪表板中转到插件,然后点击添加新插件。
  3. 点击上传。
  4. 浏览您硬盘上的 ZIP 文件。
  5. 点击立即安装。
  6. 点击激活插件以完成该过程。

    (有关安装插件的更多信息,请参见 1&1 博客)

最终想法

即使在这个早期阶段,也很容易看到这个插件的强大功能,以及为什么这种图像处理应该集成到 WordPress 中。我将继续扩展这个插件的功能,很快就会添加 WP_Image,以便开发人员能够更轻松地在 WordPress 中处理图像。有了这项功能,开发人员只需要写几行代码就可以完成整个过程。此外,用户很快就可以直接在管理页面中查看和管理图像尺寸和质量。

有关如何最好地使用 WordPress 的更多技巧和建议,无论是初学者还是高级用户,都可以访问 1&1 社区1&1 博客

© . All rights reserved.