Google Workspace插件卡片图片适配：移动端Gmail下图片尺寸调整方案咨询

我使用CardService构建了一款Google Workspace插件，在Gmail中运行，顶部展示一枚logo。桌面端视觉效果良好，但在移动端设备上，logo占用了过多屏幕空间。当前相关代码片段如下（已移除无关内容）：

var imageBytes = DriveApp.getFileById(LogoID).getBlob().getBytes();
var encodedImageURL = "data:image/jpeg;base64," + Utilities.base64Encode(imageBytes);
function cardbuild(isHomepage, section) {
  // Explicitly set the value of isHomepage as false if null or undefined.
  if (!isHomepage) {
    isHomepage = false;
  }
  // Create common elements (Image, Footer)
  var image = CardService.newImage()
    .setImageUrl(encodedImageURL)
    .setAltText('Logo');
  var footer = CardService.newFixedFooter()
    .setPrimaryButton(CardService.newTextButton()
      .setText('v. 2.5:2021-05-12')
      .setOpenLink(CardService.newOpenLink()
        .setUrl(editurl)));
  var header = CardService.newCardSection()
    .addWidget(image);
  var card = CardService.newCardBuilder()
    .addSection(header)
    .setFixedFooter(footer);
  return card.build();
}

请问是否可以通过encodedImageURL来设置更小的图片尺寸？或者有没有办法优化该插件在Android版Gmail中运行时的图片缩放效果？

当然可以优化！直接通过encodedImageURL本身没法调整尺寸，但CardService的Image对象提供了专门的方法来控制图片大小，而且还有更适配移动端的方案，具体如下：

1. 直接给Image设置固定宽高 #

这是最快速的解决方式——你可以在创建Image对象时，调用setWidth()和setHeight()方法强制限制尺寸，这样不管桌面还是移动端，图片都会按你设定的大小显示。比如：

var image = CardService.newImage()
  .setImageUrl(encodedImageURL)
  .setAltText('Logo')
  .setWidth(120) // 根据需求设置宽度，比如120px
  .setHeight(40); // 对应调整高度，保持logo原始比例避免变形

如果不想硬设两个维度，只设置其中一个（比如只设宽度），CardService会自动按原始比例缩放高度，这种方式也能避免拉伸问题。

2. 准备适配移动端的小尺寸图片（更推荐） #

如果希望不同设备显示最适配的logo尺寸，你可以在Drive中准备两个版本的图片：一个适合桌面的大尺寸，一个适合移动端的小尺寸。然后通过判断运行环境来切换图片。

Google Workspace插件可以通过CardService.getActionMetadata()获取设备类型，示例代码如下：

function cardbuild(isHomepage, section) {
  if (!isHomepage) {
    isHomepage = false;
  }

  // 获取当前设备类型
  var actionMetadata = CardService.getActionMetadata();
  var isMobile = actionMetadata && 
                 actionMetadata.getDeviceType() === CardService.DeviceType.MOBILE;

  // 根据设备选择对应的Logo ID
  var targetLogoId = isMobile ? MobileLogoID : DesktopLogoID;
  var imageBytes = DriveApp.getFileById(targetLogoId).getBlob().getBytes();
  var encodedImageURL = "data:image/jpeg;base64," + Utilities.base64Encode(imageBytes);

  var image = CardService.newImage()
    .setImageUrl(encodedImageURL)
    .setAltText('Logo');

  // 后续footer、header、card构建代码保持不变...
}

这种方式能让桌面端和移动端都获得最佳视觉体验，避免强制缩放导致的模糊或空间浪费。

3. 利用CardSection布局优化辅助调整 #

另外，你可以给包含logo的CardSection添加对齐设置，让移动端的布局更紧凑美观：

var header = CardService.newCardSection()
  .addWidget(image)
  .setHorizontalAlignment(CardService.HorizontalAlignment.CENTER); // 居中对齐，减少横向空间占用

总结一下，用setWidth()/setHeight()是快速见效的方案，而准备多版本图片是体验最优的选择，你可以根据自己的需求来挑！

内容的提问来源于stack exchange，提问作者Databoy2k