使用WP Image Editor类从图标和背景色生成图像

Question

我正在尝试根据用户在我的WordPress插件中指定的网站图标和背景颜色为多个设备生成自定义iOS独立模式网络应用启动画面元标记。

问题是WP Image Editor类没有设置新图像背景色的方法。取而代之的是，我尝试通过将$ crop定义为true来将网站图标（原始512x512）的尺寸调整为更高的分辨率，而不进行拉伸，但是它调整了整个图标的尺寸，而不是画布。 我认为如果可行，图标分辨率将是相同的，背景将是透明的，但它不起作用。

为澄清起见，我们有这张图片：

并且我想生成它（如果用户指定的颜色是#eeeeee）：

到目前为止，我的代码是这样的，用于调整未启用裁剪功能的原始图标的大小：

$devices  = array(
    'iPhone X' => array(
        'device-width'               => '375px',
        'device-height'              => '812px',
        '-webkit-device-pixel-ratio' => '3',
        'launch-width'               => '1125',
        'launch-height'              => '2436',
    ),

    'iPhone 8, 7, 6, s6' => array(
        'device-width'               => '375px',
        'device-height'              => '667px',
        '-webkit-device-pixel-ratio' => '2',
        'launch-width'               => '750',
        'launch-height'              => '1334',
    ),

    'iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus' => array(
        'device-width'               => '414px',
        'device-height'              => '736px',
        '-webkit-device-pixel-ratio' => '3',
        'launch-width'               => '1242',
        'launch-height'              => '2208',
    ),

    'iPhone 5' => array(
        'device-width'               => '320px',
        'device-height'              => '568px',
        '-webkit-device-pixel-ratio' => '2',
        'launch-width'               => '640',
        'launch-height'              => '1136',
    ),

    'iPad Mini, Air' => array(
        'device-width'               => '768px',
        'device-height'              => '1024px',
        '-webkit-device-pixel-ratio' => '2',
        'launch-width'               => '1536',
        'launch-height'              => '2048',
    ),

    'iPad Pro 10.5' => array(
        'device-width'               => '834px',
        'device-height'              => '1112px',
        '-webkit-device-pixel-ratio' => '2',
        'launch-width'               => '1668',
        'launch-height'              => '2224',
    ),

    'iPad Pro 12.9' => array(
        'device-width'               => '1024px',
        'device-height'              => '1366px',
        '-webkit-device-pixel-ratio' => '2',
        'launch-width'               => '2048',
        'launch-height'              => '2732',
    ),
);

$icon = get_option( 'site_icon' );
$img = wp_get_image_editor( $icon );
if ( ! is_wp_error( $img ) ) {
    foreach ( $devices as $device ) {
        $new_image = resize( $device['launch-width'], $device['launch-height'], true );
        echo '<link rel="apple-touch-startup-image" media="(device-width: '.$device['device-width'].') and (device-height: '.$device['device-height'].') and (-webkit-device-pixel-ratio: '.$device['-webkit-device-pixel-ratio'].')" href="'.$new_image.'">';
    }
}

输出应如下所示：

<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1125x2436.png">

<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-750x1334.png">

<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1242x2208.png">

<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-640x1136.png">

<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1536x2048.png">

<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1668x2224.png">

<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-2048x2732.png">