diff --git a/lib/routes/telegram/channel.ts b/lib/routes/telegram/channel.ts index e5e83a60319c73..d8fd9efcb542f2 100644 --- a/lib/routes/telegram/channel.ts +++ b/lib/routes/telegram/channel.ts @@ -428,9 +428,40 @@ async function handler(ctx) { const background = $node.css('background-image'); const backgroundUrl = background && background.match(/url\('(.*)'\)/); const backgroundUrlSrc = backgroundUrl && backgroundUrl[1]; - const width = Number.parseFloat($node.css('width') || '0'); - const height = ((Number.parseFloat($node.find('.tgme_widget_message_photo').css('padding-top') || '0') / 100) * width).toFixed(2); - tag_media += backgroundUrlSrc ? `` : ''; + const attrs = [`src="${backgroundUrlSrc}"`]; + /* + * If the width is not in px, it is either a percentage (Link Preview/Instant view) + * or absent (ditto). + * Only accept px to prevent images from being invisible or too small. + */ + let width = 0; + const widthStr = $node.css('width'); + if (widthStr && widthStr.endsWith('px')) { + width = Number.parseFloat(widthStr); + } + /* + * Height is present when the message is an album but does not exist in other cases. + * Ditto, only accept px. + * !!!NOTE: images in albums may have smaller width and height. + */ + let height = 0; + const heightStr = $node.css('height'); + if (heightStr && heightStr.endsWith('px')) { + height = Number.parseFloat(heightStr); + } + /* + * Only calculate height when needed. + * The aspect ratio is either a percentage (single image) or absent (Link Preview). + * Only accept percentage to prevent images from being invisible or distorted. + */ + const aspectRatioStr = $node.find('.tgme_widget_message_photo').css('padding-top'); + if (height <= 0 && width > 0 && aspectRatioStr && aspectRatioStr.endsWith('%')) { + height = (Number.parseFloat(aspectRatioStr) / 100) * width; + } + // Only set width/height when >32 to avoid invisible images. + width > 32 && attrs.push(`width="${width}"`); + height > 32 && attrs.push(`height="${height.toFixed(2).replace('.00', '')}"`); + tag_media += backgroundUrlSrc ? `` : ''; } if (tag_media) { tag_media_all += tag_media;