从 Viber 键盘按钮的图像中获取错误的图像

Question

我正在使用 PHP 通过 Viber REST API 创建 Viber 机器人。我试图了解如何创建 Viber 的键盘设计集，但无济于事。如何让它看起来像 Viber 提供的键盘设计示例一样？

[
      [
            'Columns' => 3,
            'Rows' => 2,
            'Text' => '<font color=\"#494E67\">Smoking</font><br><br>',
            'TextSize' => 'medium',
            'TextHAlign' => 'center',
            'TextVAlign' => 'bottom',
            'ActionType' => 'reply',
            'ActionBody' => 'Smoking',
            'BgColor' => '#f7bb3f',
            'Image' => 'https://img.icons8.com/material-outlined/24/000000/smoking.png',
      ],
      [
            'Columns' => 3,
            'Rows' => 2,
            'Text' => '<font color=\"#494E67\">Non Smoking</font><br><br>',
            'TextSize' => 'medium',
            'TextHAlign' => 'center',
            'TextVAlign' => 'bottom',
            'ActionType' => 'reply',
            'ActionBody' => 'Non smoking',
            'BgColor' => '#f6f7f9',
            'Image' => 'https://img.icons8.com/material-outlined/24/000000/no-smoking.png',
      ],
]

Answer 1

Viber 尝试拉伸小图像来填充按钮，虽然有方法控制哪个轴最大以及图像是否被裁剪，但无法阻止这种拉伸。

您可以将每个按钮保存为高分辨率图像（包括文本和图标），然后使用该图像作为按钮的“image”属性的值。

或者，您可以放大当前图像透明背景，使图像总尺寸更大并可以填充按钮（例如 100x100 像素），而图标大小保持不变（24x24 像素）。但是，这种方法的缺点是您需要找到如何在图像中定位图标，使其不与文本重叠。因此，先前建议的使用包含文本和图标的高分辨率图像通常是更可取的。