打開新創團隊的 FigJam 檔案,先看過別人的想法,再結合我自己的想法,把我這兩天想到的角色發想過程寫上去。
導師已經到公司了,在他給我任務之前用 Google 地圖尋找今天的午餐。
我傳訊息問導師,"請問我今天的任務是繼續調整生命靈數的預覽圖位置嗎?",導師說對。
幾分鐘後導師傳來訊息,提到手機版的截圖結果的內容會偏上,要調整一下;之後他把我的程式碼上傳到正式機,讓我也可以試試看操作正式機的網站、看截圖的結果。
嘗試用正式機的網站、輸入不同日期去截圖產生圖片,就和我昨天在自己的筆電上嘗試的結果一樣。
我回去翻之前的實習日誌,一月六日我做出截圖功能的時候結果是完全正確沒有偏移的,不過當時並沒有設定視窗或是區塊的尺寸,就只是把整個區塊渲染成圖片而已。先註解掉導師寫在截圖前的調整 CSS 的程式碼、取消註解其中一部份,試了幾次都沒有成功。
意識到昨天設定的是渲染圖片時整個視窗的尺寸,而非被選取的區塊的尺寸。好像應該是要設定被選取的區塊的尺寸才對。
再看一次 html2canvas 官方文件的 Options 頁面,找到 onclone
選項,吃完午餐之後來試看看。
餐廳:龎太食品 / 餛飩舖子
我點了干貝餛飩抄手 $110,內容物有干貝絲、餛飩皮、沙茶醬、蔥花、蒜泥;還有胡麻麵 (小) (冷) $60,內容物有白細麵、胡麻醬、小黃瓜、紅蘿蔔。
有一位正職員工原本每天都會在實習生群組中發布這段訊息"Dear All~目前有沒有不舒服的症狀,再請各自line我回報身體狀況唷,謝謝!",如果當天身體狀況正常,只要私訊"我今天很健康"之類的話就可以了。
吃午餐前看到和昨天一樣的訊息"Dear All 請大家至個人的時程管理中心回報身體狀況,感謝!",於是我傳訊息詢問"不好意思,請問時程管理中心是什麼?",正職員工就補傳了原本應該要傳的訊息,並私訊我"抱歉,時程是給正職在用的,我剛打錯,謝謝你提醒,已更正",我回覆"感謝更正,我今天也很健康"。
onclone
選項的描述的中文翻譯是:
當文件被複製以用來渲染時會被呼叫的回呼函式,可用來修改要被渲染的內容而不會影響到原始文件
找到 width
和 height
選項可以設定 canvas 的尺寸,scale
可以設定縮放倍率。
找到額外的參考資料:使用 Chrome 內建工具製作網頁長截圖,擷取網站畫面免安裝下載外掛
嘗試多次仍無法消除偏移。
再看一次 html2canvas 官方文件的 Features 頁面,確定專案當中並未使用任何不支援的 CSS 屬性。
去看 html2canvas 釋出版本,最新版本是 1.4.1,檢查後得知專案中的版本是 1.0.0-alpha.9。
想說已經卡了兩個半小時,應該可以問問題了,導師就傳訊息來問"還好嗎?"。
我回覆"改來改去都無法消除偏移,決定先改回昨天的版本。目前的程式碼產出的結果,相比昨天新增的部分,只有固定圖片尺寸和縮放倍率,好處是內容相同體積縮小。"
把 html2canvas.min.js 換成最新版,手機版和電腦版的截圖結果都不會偏移了,只剩下最上方有白邊,應該是寫錯位置的外距所造成。修改 style.css,把這個外距移到外層元素上,就沒有白邊了。終於完成了。
我想確認截圖結果的尺寸,於是傳訊息問導師"請問截圖結果的尺寸,是依照目前的程式碼設定成 1200px * 628px,還是依照上周提到過 的 1200px * 768px?",導師說應該是 1200 * 628,為說成 768 道歉,我回覆"只是上周說是 768px,目前的程式碼是 628px"。
我傳訊息給導師"那我全部完成了,手機版和電腦版的截圖結果都完全正確且完全相同",導師回覆"讚"。
上傳目前進度並傳訊息告知導師,導師回覆"收到"。
去做新創團隊的網頁。
導師把最新的程式碼上傳到正式機,用他的手機操作網站,我才知道在手機上網站才會出現一些問題,和我討論後提出最後三個要調整的項目:
解決辦法:
float
傳訊息給導師"三個項目都已改好並上傳",導師回覆"👍"、"這年前就可以上線了,變你的作品之一",我回覆"感謝"。
我本來以為今天的任務大概是沒辦法解決了,因為爬文的時候看到一些不同版本支援的功能有差異的描述,才想到更新版本這個方法。