在 Day 16 文章中,我們使用 Cloudflare Workers 實作了圖片代理功能。到目前為止,我們已經完成以下準備工作:
現在,我們可以將這些元素整合到後端系統中,並實際測試其運作效果。
本日程式碼的範例連結
ImageMap Message 參數說明:
在這個型別定義中,我主要做了四個調整,其餘沿用原本的型別定義:
MessageCommon
型別baseUrl
必須使用 HTTPS 以確保安全性type
欄位,改為在函式內部定義,減少使用者需要傳遞的參數baseSize
設為可選參數,預設值為 1040 x 1040
,使用者僅在需要自訂背景圖尺寸時才需傳遞line-message/types/imageMap-message.ts
import { ImageMapMessage, Size } from '@line/bot-sdk';
import { MessageCommon } from './message-common';
type HttpsURL = `https://${string}`;
export type ImageMapMessageReq = MessageCommon &
Omit<ImageMapMessage, 'type' | 'baseSize'> & {
baseUrl: HttpsURL;
baseSize?: Size;
};
ImageMap Action 可以設置以下三種類型(主要以前面兩種為主):
從 Bot Designer
貼過來的 JSON 中,沒有看到關於 video
進階功能的屬性配置,因此我們會在函式中手動處理這個可選參數。
line-message/line-message.service.ts
createImageMapMessage(imageMapMessageReq: ImageMapMessageReq) {
const {
baseUrl,
altText,
baseSize = {
width: 1040,
height: 1040,
},
actions,
sender,
quickReplyItems,
video,
} = imageMapMessageReq;
const imageMapMessage: ImageMapMessage = {
type: MessageType.ImageMap,
baseUrl,
altText,
baseSize,
actions,
...(video && { video }), // video 是可選的參數
...this.buildCommonMessageProps(sender, quickReplyItems),
};
return imageMapMessage;
}
將 Bot Designer 產生的 JSON 直接貼上,並替換 baseUrl 為 Cloudflare Workers 端點即可使用
這個範例將圖片切割為四個互動區塊,點擊不同區域會觸發對應的訊息回應。
line-webhook/line-webhook.service
if (text === 'imageMap') {
return this.lineMessageService.createImageMapMessage({
// 記得替換成 Cloudflare Workers 端點
baseUrl:
'https://linebot-imagemap.qd513020.workers.dev/001_macrfh/jpeg',
altText: 'This is an imagemap',
actions: [
{
type: 'message',
area: {
x: 0,
y: 0,
width: 520,
height: 520,
},
text: '左上角圖片訊息',
},
{
type: 'message',
area: {
x: 0,
y: 520,
width: 520,
height: 520,
},
text: '左下角圖片訊息',
},
{
type: 'message',
area: {
x: 520,
y: 0,
width: 520,
height: 520,
},
text: '右上角圖片訊息',
},
{
type: 'message',
area: {
x: 520,
y: 520,
width: 520,
height: 520,
},
text: '右下角圖片訊息',
},
],
});
}
成果展示
ImageMap Message 雖然設置較複雜,但與 Image Message 的應用場景截然不同。它就像互動式海報,提供豐富的視覺展示空間與多重互動體驗。實務上除了多區域切割,將整張圖片設為單一互動區域也很常見,特別適合宣傳海報、活動頁面、產品展示等需要視覺衝擊的場景。
實務上可以搭配 AI 工具快速產出行銷素材。例如使用 Microsoft Designer 生成廣告圖或宣傳海報,再透過 Canva 等設計工具調整為 1040 x 1040 尺寸,就能快速製作出一張互動海報。
在設計時,建議在圖片中加入視覺引導元素(如按鈕樣式、箭頭指示等),提示使用者該區域可點擊。點擊後系統會顯示對應訊息或開啟指定連結,創造良好的互動體驗。
若只需單一互動區塊,可以跳過 Bot Designer,直接定義 action 座標範圍。實作步驟如下:
publicId
和 imageType
baseUrl
這樣整張海報都會成為可點擊的互動區域,是非常實用的設計手法。
line-webhook/line-webhook.service.ts
if (text === 'imageMap') {
return this.lineMessageService.createImageMapMessage({
baseUrl:
'https://linebot-imagemap.qd513020.workers.dev/Line_%E6%B5%B7%E5%A0%B1v2_hsp2fd/png',
altText: '背單字提醒!',
actions: [
{
type: 'message',
area: {
x: 0, // 起始 x 座標
y: 0, // 起始 y 座標
width: 1040,
height: 1040,
},
text: 'greate',
},
],
});
}
成果展現
ImageMap 支援影片嵌入功能,透過定義座標範圍將影片覆蓋在圖片上方。需要注意的是:
ImageMap video 屬性參數說明:
先以半屏寬度(520px)的方式將影片覆蓋在圖片左側,觀察其顯示效果。
{
baseUrl:
'https://linebot-imagemap.qd513020.workers.dev/Line_%E6%B5%B7%E5%A0%B1v2_hsp2fd/png',
altText: '背單字提醒!',
video: {
previewImageUrl: 'https://res.cloudinary.com/dseg0uwc9/image/upload/e_improve,w_520,h_600,c_thumb,g_auto/v1752220479/2025%20IT%20%E9%90%B5%E4%BA%BA%E8%B3%BD/569400541533438471.jpg',
originalContentUrl:'https://res.cloudinary.com/dseg0uwc9/video/upload/v1753430100/test_video_fyraxr.mp4',
area: {
x: 0,
y: 0,
width: 520, // 寬度設置一半
height: 1040,
},
externalLink: {
label: '點我領取相關資訊',
linkUri: 'https://google.com.tw/',
},
},
// action 略
}
手機呈現 ImageMap Video 畫面
externalLink
可以在行動裝置播放影片的過程中,引導使用者前往網站查看完整資訊
全屏影片覆蓋 - 跨平台相容方案
接著將 video 區塊設為全屏(1040 x 1040)完全覆蓋圖片。由於桌機版 LINE 無法顯示 ImageMap 影片功能,為了實現跨平台相容,建議採用以下設計。
設定方式
baseUrl
和 previewImageUrl
設為相同圖片顯示效果
baseUrl
的海報圖片,點擊後提示切換到行動裝置觀看這樣設計能確保兩個平台都有良好的使用體驗。
if (text === 'imageMap') {
return this.lineMessageService.createImageMapMessage({
baseUrl:
'https://linebot-imagemap.qd513020.workers.dev/Line_ImageMap_Message_video_%E8%A8%AD%E8%A8%88_g4oh3d/png',
altText: '背單字提醒!',
video: {
previewImageUrl:'https://linebot-imagemap.qd513020.workers.dev/Line_ImageMap_Message_video_%E8%A8%AD%E8%A8%88_g4oh3d/png/1040',
originalContentUrl:'https://res.cloudinary.com/dseg0uwc9/video/upload/v1753430100/test_video_fyraxr.mp4',
area: {
x: 0,
y: 0,
width: 1040, // 滿版 1040
height: 1040,
},
externalLink: {
label: '點我領取相關資訊',
linkUri: 'https://google.com.tw/',
},
},
// action 略
});
}
成果展示
花了三篇文章的篇幅,總算把 ImageMap Message 的完整流程說明清楚了。會特別著墨在這個訊息類型,主要是因為它在實務上真的很常被使用。特別是搭配 video 功能後,在短影音盛行的現在,越來越多品牌會用這種方式吸引使用者點擊,再導流到主網站查看完整資訊。