DAY27 linebot message Imagemap 介绍

传送影像地图(Imagemap)

client.replyMessage(event.replyToken, 
    {
        type: 'imagemap',
        baseUrl: 'https://github.com/line/line-bot-sdk-nodejs/raw/master/examples/kitchensink/static/rich',
        altText: 'Imagemap alt text',
        baseSize: { width: 1040, height: 1040 },
        actions: [
            { area: { x: 0, y: 0, width: 520, height: 520 }, type: 'uri', linkUri: 'https://store.line.me/family/manga/en' },
            { area: { x: 520, y: 0, width: 520, height: 520 }, type: 'uri', linkUri: 'https://store.line.me/family/music/en' },
            { area: { x: 0, y: 520, width: 520, height: 520 }, type: 'uri', linkUri: 'https://store.line.me/family/play/en' },
            { area: { x: 520, y: 520, width: 520, height: 520 }, type: 'message', text: 'URANAI!' },
        ],
        video: {
            originalContentUrl: 'https://github.com/line/line-bot-sdk-nodejs/raw/master/examples/kitchensink/static/imagemap/video.mp4',
            previewImageUrl: 'https://github.com/line/line-bot-sdk-nodejs/raw/master/examples/kitchensink/static/imagemap/preview.jpg',
            area: {
                x: 280,
                y: 385,
                width: 480,
                height: 270,
            },
            externalLink: {
                linkUri: 'https://line.me',
                label: 'LINE'
            }
        },
    }
)

baseUrl
baseUrl 的值要填入图片网址，但 Line 会在取图片时在网址後面加上 /240、/300、/460、/700、/1040，这是为了各种装置需要的图片尺寸不同所作的设计，图片越小，读取速度就可以越快。不过我们这边也要制作各种大小的图片，而且要配合他的网址，让这些网址都能正确读取到图。如果要作到最完美的话，当然就是符合 Line 的规范来作，但是为了求方便，还是有取巧的方法可以用，图片档案格式必须为JPEG或PNG，上传到後台时，请去除掉档案的副档名。

— Line内使用的图片，为让使用者有较佳体验，尺寸保持在1MB以内。

altText
altText 的文字会显示在 Line 的聊天选单上，或推播讯息上。

baseSize
baseSize 是控制图片显示出来的大小。

actions
actions 用来控制图片中各个区域被按下後要发生什麽事，这里有两种事情可以做，一种是点了之後开网页，另一种是点了之後替用户发讯息。

今天的歌曲是 周杰伦-搁浅
https://www.youtube.com/watch?v=YJfHuATJYsQ&list=PLFl6Na2uUoOZBEhBtQ_jeGA4P1V20JvpW&index=25&ab_channel=%E5%91%A8%E6%9D%B0%E5%80%ABJayChou