Получение неправильного изображения из изображения кнопки клавиатуры Viber

Question

Я создаю бота Viber через Viber REST API с использованием PHP. Я пытаюсь понять, как создать дизайн клавиатуры, установленный 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 пикселей). Однако у этого подхода есть недостаток, заключающийся в том, что вам нужно найти, как расположить значок на изображении так, чтобы он не перекрывался с текстом. По этой причине, как правило, предпочтительнее предыдущее предложение использовать изображение с высоким разрешением, содержащее текст и значок.