導師傳來訊息＂手機的部分我來處理，你今天試試看一個功能＂，然後是長輩圖測驗的結果頁面截圖，用紅框標示出 Facebook 分享按鈕。導師補充說明，＂生命靈數結果頁也有分享功能，但他分享是根據結果分享的，所以等於會有366張結果，你找找看html2canvas.js來產預覽圖的方式把它放在fb單圖連結上＂。
去查 html2canvas.js 的官方文件，得知它可以產生網頁的截圖，範圍可以是整個網頁或是網頁中的一部分。傳訊息問導師＂請問要產生預覽圖的範圍，是只有描述，還是連標題都要有？＂，導師傳來一張截圖，是描述和標題都有，我回覆收到。
我看了導師的截圖才發現我沒匯入資料庫，不過目前不處理也沒關係。
觀察長輩圖測驗的分享功能的運作原理，應該是按下按鈕後開啟彈出視窗，這個視窗的網址有一大堆參數，於是我去找 Facebook 的開發人員網站，搜尋 share，找到在網頁上分享、開放社交關係圖標記、分享對話方塊。
成功啟動分享對話方塊了，不過標題和描述還需要再調整。先去研究產生截圖的功能。
餐廳：Omni⁺歐米家生活館
我點了奶油培根義大利麵 $110，內容物有義大利麵、奶油白醬、培根、蘑菇、洋蔥、半熟煎蛋，活動期間 (即日起到 06/30) 送一杯飲料，我選了水果茶。
參考HTML2canvas and Canvas2image, downloaded screenshot doesn't show my HTML images，嘗試利用 Canvas2image 把 canvas 轉成圖片。
嘗試好幾次上述範例的寫法
1linkhtml2canvas(document.querySelector('.specific'), {
2link onrendered: function(canvas) {
3link // document.body.appendChild(canvas);
4link return Canvas2Image.saveAsPNG(canvas);
5link }
6link});
都無法順利運作，最後改回 html2canvas 官方文件的寫法，並設定圖片檔名
1link
2linkhtml2canvas(window).then(canvas => {
3link // document.body.appendChild(canvas);
4link return Canvas2Image.saveAsPNG(canvas, canvas.width, canvas.height, 'test');
5link});
就可以成功開啟下載圖片的對話框，檔名和預想中相同是 test.png，下載圖片後檢查，內容是正確的。
檢查導師最新修改的內容，才看懂因為程式碼是直接讀取 data.json，根本不需要資料庫。並且手機板的 CSS 有做一些調整。
導師傳來訊息＂你有空可以pull code下來 我改好手機的部分 你看看修改歷程＂，我回覆＂感謝，我剛才已經看過了＂。
紀錄一下分享功能的完整運作流程：
回報目前的進度。我傳訊息給導師＂目前進度是，html2canvas 可以產生 canvas，canvas2image 可以開啟下載圖片的對話框＂。
來處理下載圖片步驟。目前是讓使用者可以把圖片下載到客戶端，想來想去應該是要把圖片儲存在伺服端才對。找到 How to save an HTML5 Canvas as an image on a server?，參考眾多網友的做法再回來寫程式。
利用 jQuery $.ajax 方法，還有參考一堆網路文章，成功下載圖片到伺服端。
順便把下載圖片到客戶端的功能也做出來。
我已經寫了開放社交關係圖標記，可是分享對話方塊中沒有顯示相關資料。
問導師該如何處理，他說網址之類的資料需要寫絕對路徑，加上只有已上線的網站可以讓 Facebook 的爬蟲解析資料，所以在本地開發階段，分享對話方塊中無法顯示相關資料。導師說之後他會再調整這塊。
我開啟儲存在伺服端的圖片，導師說這就是他要的，不過要再改成 Facebook 適用的尺寸，應該是 1280px * 768px。
導師提到我之前有問過是否需要再玩一次的按鈕，他說後來發現有需要，所以正式上線的網站他有加入這個按鈕。
我說我有另外做出讓使用者下載圖片到客戶端的功能，導師說他會去問問看有沒有要加入一個下載我的結果的按鈕。
下班前發現描述文字只有第一段會縮排，問導師是否需要調整，導師說應該還好，有需要的話可以再改。
今天學到的知識與實作的功能，日後應該可以用在新創團隊的網站 2.0。