如何透過 HTML 建立圖片以建立動態複合式資訊卡

RCS Business 最強大且功能最多元的內容類型之一訊息是複合式資訊卡。使用複合式資訊卡時，您可以將整批相關資訊合併成單一訊息，包含圖片或影片、標題、說明以及最多四則建議的回覆或動作。

獨立的複合式資訊卡和複合式資訊卡輪轉介面具有強大的功能，可協助您為使用者打造引人入勝的體驗只要你需要分享的圖片是優待券或產品等靜態圖片。但假如您需要根據使用者的相關資訊傳送動態內容例如登機證？

在本文件中，我將示範如何使用 HTML 和方便你將圖片嵌入服務專員傳送的複合式資訊卡瞭解如何轉換將 HTML 轉換為圖片

從 HTML 到圖片

HTML 很適合建立文字和媒體的組合。身為開發人員我們需要建構產品，以便將登機證、資料用量圖表或任何其他類型的使用者專屬資訊產生的 HTML 可能是我們要使用的工具RCS Business Messaging 包含多媒體資訊卡只支援圖片和影片媒體類型，因此如要使用 HTML 強大功能來生成動態內容，首先需要並轉換成圖片

幸好，大部分的新型程式設計語言都支援資料庫可轉譯至少基本 HTML 程式碼的網頁或元件 (適用於例如 JEditorPane)、可用來生成圖像

您也可以透過 API 拍照網頁，例如： Google 的 Page Insights API 可以透過網址自動產生螢幕擷取畫面

範例：

https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=https://www.google.com&screenshot=true

在接下來的動作中，我們使用 Node.js Express 應用程式來產生特定的使用者透過 HTML 將登機證轉換為圖片，然後公開上傳至並附加複合式資訊卡中的圖片，以便傳送給使用者。

建立動態登機證

首先，我們需要產生 HTML 來產生登機證，如下所示圖片。

登機證範例

完成此操作的方法有很多種，不過，我們要定義網址端點顯示在名為 /getTicket?msisdn=+12223334444 的 Node.js 應用程式中我們需要使用 EJS 檢視引擎提供登機證

假設有一個名為 getUserTicket 的函式會使用使用者的電話號碼並傳回包含此類資訊的票券物件出發時間、座位、票券類型和出發地點。

在 Express 應用程式的路由器中，我們會定義 getTicket 端點，並呼叫 getUserTicket 函式，並將票證傳送至 EJS 範本。

router.get('/getTicket', function(req, res, next) {
    // Get the passed in phone number
    let msisdn = req.body.msisdn;

    // Get the ticket object for this user
    let ticket = getUserTicket(msisdn);

    // Render the ticket in HTML using an EJS template
    res.render('ticket', {ticket: ticket});
});

票券 EJS 範本會定義下列 HTML 以轉譯 Bonjour 範例火車票。

<div>
  <div>
    <div class="left"><img width="200" src="/images/bonjour-rail-logo.png" /></div>
    <div class="right muted-text"><%= ticket.dateOfDeparture; %></div>
    <div class="cl"></div>
  </div>
  <div>
    <div class="left highlighted-text-color"><h2><%= ticket.startingLocation.city %></h2><br/><%= ticket.startingLocation.station %></div>
    <div class="right highlighted-text-color"><h2><%= ticket.endingLocation.city %></h2><br/><%= ticket.endingLocation.station %></div>
    <div class="cl"></div>
  </div>

  <div>
    <div class="left">
        <h3>PLATFORM <%= ticket.platform %></h3>
      <div>
        <div class="left">
          <div><h4>DEPART</h4></div>
          <div><%= ticket.departureTime %></div>
        </div>
        <div class="left">
          <div><h4>ARRIVE</h4></div>
          <div><%= ticket.arrivalTime %></div>
        </div>
        <div class="cl"></div>
      </div>
      <div>
        <div class="left">
          <div><h4>TICKET TYPE</h4></div>
          <div><%= ticket.ticketType %></div>
        </div>
        <div class="left">
          <div><h4>SEAT</h4></div>
          <div><%= ticket.seat %></div>
        </div>
        <div class="cl"></div>
      </div>
    </div>
    <div class="right">
      <img src="<%= ticket.qrCode %>" width="170" />
    </div>
    <div class="cl"></div>
  </div>
</div>

使用 HTML 建立圖片

我們已經定義 HTML 來建立登機證，但必須並轉換成圖片

有許多開放原始碼 Node.js 模組可用於轉換兩種原始 HTML 轉換為圖片為了方便說明，我們要使用 node-webshot 這是 PhantomJS 周圍的光包裝函式。

PhantomJS 是可以執行程式碼的無指令碼瀏覽器，能將 HTML 轉譯成圖片。由於 PhantomJS 依賴 WebKit 進行轉譯，因此可以在包括圖像、CSS 和 JavaScript

安裝節點 webshot (npm install --save node-webshot) 後，進行轉換轉換為圖片的 HTML 很簡單。

var webshot = require('node-webshot');
let url = '/getTicket?msisdn=' + msisdn;
let htmlAsImageFileLocation = 'ticket.png';

// Define screenshot options
var options = {
      screenSize: {
            width: 550,
            height: 450
      },
      shotSize: {
            width: 550,
            height: 450
      },
      userAgent: 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.20 (KHTML, like Gecko) Mobile/7B298g'
    };

// Save html as an image
webshot(url, htmlAsImageFileLocation, options, function(err) {
  // TODO: Upload image to a publicly accessible URL
});

將檔案儲存到可公開存取的網址

如要使用 Webshot 生成的圖片，我們需要開放大眾存取的圖片網址。如果您在專用網路伺服器上產生圖片，或許可以將檔案儲存到公用資料夾，但在本範例中，我們要上傳將檔案上傳至 Google Cloud Storage。

下列函式會擷取本機圖片位置，並將其上傳至 Google Cloud Storage，傳回新建立的媒體連結。

function uploadImage(imageLocation) {
    const {Storage} = require('@google-cloud/storage');

    // Creates a client
    const storage = new Storage();

    // Define the Cloud storage location and filename
    const bucketName = 'sample-image-uploads';
    const yourFileDestination = 'uploaded-image.png';

    // Set the options for the upload to be readable by anyone
    const options = {
        destination: yourFileDestination,
        predefinedAcl: 'publicRead'
    };

    // Return a promise that includes the storage upload
    return new Promise(function(resolve, reject) {
        // Uploads a local file to the bucket
        storage.bucket(bucketName).upload(imageLocation, options)
            .then(results => {
                // Return the image URL
                resolve(results[0].metadata.mediaLink);
            }).catch(error => {
                reject(error);
            });
    });
}

接下來，我們需要將之前註解的 TODO 替換為呼叫，以便使用這個 uploadImage 函式。

// Save html as image
webshot(url, htmlAsImageFileLocation, options, function(err) {
      let uploadRequest = uploadImage(filename);

      uploadRequest.then(function(imageUrl) {
         // TODO: Use the imageUrl in a rich card to send to the user
      });
});

傳送含有圖片的複合式資訊卡

就快完成了。完成最後一步 sendBoardingPass(imageUrl, msisdn) 函式，可建立 RBM 複合式資訊卡並傳送給使用者

如要透過 RBM 傳送複合式資訊卡，我使用第一個代理程式範例。

function sendBoardingPass(imageUrl, msisdn) {
    let title = 'Here is your boarding pass.';

    let suggestions = [
                {
                    reply: {
                        text: 'See more options',
                        postbackData: 'more_options',
                    }
                },
            ];

    let params = {
        messageText: title,
        msisdn: msisdn,
        imageUrl: imageUrl,
        suggestions: suggestions,
        height: 'TALL',
    };

    // Send the boarding pass
    rbmApiHelper.sendRichCard(params);
}

以下是最終結果的螢幕截圖。

複合式資訊卡中的動態圖片

總結與摘要

想讓複合式資訊卡發揮更多功用，最簡單的方法就是使用動態 HTML 並將 HTML 轉換為圖片大部分新型程式設計語言支援協助您完成轉換的程式庫或 API。您可能需要嘗試調整圖片大小讓圖片看起來符合您的用途不過在 Shorts 中製作更吸引人的圖像 RBM 服務專員。

祝您編寫程式一切順利！

如何透過 HTML 建立圖片以建立動態複合式資訊卡 透過集合功能整理內容 你可以依據偏好儲存及分類內容。