Created With

link實習日誌 20230113

link09:00 角色發想

打開新創團隊的 FigJam 檔案,先看過別人的想法,再結合我自己的想法,把我這兩天想到的角色發想過程寫上去。

link10:00 尋找午餐

導師已經到公司了,在他給我任務之前用 Google 地圖尋找今天的午餐。

link10:30 詢問任務

我傳訊息問導師,"請問我今天的任務是繼續調整生命靈數的預覽圖位置嗎?",導師說對。

幾分鐘後導師傳來訊息,提到手機版的截圖結果的內容會偏上,要調整一下;之後他把我的程式碼上傳到正式機,讓我也可以試試看操作正式機的網站、看截圖的結果。

嘗試用正式機的網站、輸入不同日期去截圖產生圖片,就和我昨天在自己的筆電上嘗試的結果一樣。

我回去翻之前的實習日誌,一月六日我做出截圖功能的時候結果是完全正確沒有偏移的,不過當時並沒有設定視窗或是區塊的尺寸,就只是把整個區塊渲染成圖片而已。先註解掉導師寫在截圖前的調整 CSS 的程式碼、取消註解其中一部份,試了幾次都沒有成功。

link11:30 去查資料

意識到昨天設定的是渲染圖片時整個視窗的尺寸,而非被選取的區塊的尺寸。好像應該是要設定被選取的區塊的尺寸才對。

再看一次 html2canvas 官方文件的 Options 頁面,找到 onclone 選項,吃完午餐之後來試看看。

link12:00 午餐

餐廳:龎太食品 / 餛飩舖子

我點了干貝餛飩抄手 $110,內容物有干貝絲、餛飩皮、沙茶醬、蔥花、蒜泥;還有胡麻麵 (小) (冷) $60,內容物有白細麵、胡麻醬、小黃瓜、紅蘿蔔。


link13:00 回到公司

有一位正職員工原本每天都會在實習生群組中發布這段訊息"Dear All~目前有沒有不舒服的症狀,再請各自line我回報身體狀況唷,謝謝!",如果當天身體狀況正常,只要私訊"我今天很健康"之類的話就可以了。

吃午餐前看到和昨天一樣的訊息"Dear All 請大家至個人的時程管理中心回報身體狀況,感謝!",於是我傳訊息詢問"不好意思,請問時程管理中心是什麼?",正職員工就補傳了原本應該要傳的訊息,並私訊我"抱歉,時程是給正職在用的,我剛打錯,謝謝你提醒,已更正",我回覆"感謝更正,我今天也很健康"。

link13:30 增加設定

onclone 選項的描述的中文翻譯是:

當文件被複製以用來渲染時會被呼叫的回呼函式,可用來修改要被渲染的內容而不會影響到原始文件

找到 widthheight 選項可以設定 canvas 的尺寸,scale 可以設定縮放倍率。

找到額外的參考資料:使用 Chrome 內建工具製作網頁長截圖,擷取網站畫面免安裝下載外掛

嘗試多次仍無法消除偏移。

link15:30 回報進度

再看一次 html2canvas 官方文件的 Features 頁面,確定專案當中並未使用任何不支援的 CSS 屬性。

去看 html2canvas 釋出版本,最新版本是 1.4.1,檢查後得知專案中的版本是 1.0.0-alpha.9。

想說已經卡了兩個半小時,應該可以問問題了,導師就傳訊息來問"還好嗎?"。

我回覆"改來改去都無法消除偏移,決定先改回昨天的版本。目前的程式碼產出的結果,相比昨天新增的部分,只有固定圖片尺寸和縮放倍率,好處是內容相同體積縮小。"

link16:00 試用新版

把 html2canvas.min.js 換成最新版,手機版和電腦版的截圖結果都不會偏移了,只剩下最上方有白邊,應該是寫錯位置的外距所造成。修改 style.css,把這個外距移到外層元素上,就沒有白邊了。終於完成了。

link16:30 確認尺寸

我想確認截圖結果的尺寸,於是傳訊息問導師"請問截圖結果的尺寸,是依照目前的程式碼設定成 1200px * 628px,還是依照上周提到過 的 1200px * 768px?",導師說應該是 1200 * 628,為說成 768 道歉,我回覆"只是上周說是 768px,目前的程式碼是 628px"。

link17:00 大功告成

我傳訊息給導師"那我全部完成了,手機版和電腦版的截圖結果都完全正確且完全相同",導師回覆"讚"。

上傳目前進度並傳訊息告知導師,導師回覆"收到"。

去做新創團隊的網頁。

link17:30 最後調整

導師把最新的程式碼上傳到正式機,用他的手機操作網站,我才知道在手機上網站才會出現一些問題,和我討論後提出最後三個要調整的項目:

  1. 標題換行之後兩行字之間太近了
  2. 首頁的背景圖片最下方有黑色色塊,會和黑色文字重疊
  3. 結果頁的下方的按鈕會偏左,要調回中間

解決辦法:

  1. 行距增加
  2. 增加文字的外距,試過之後覺得每個手機的高度都不同,用外距好像不太好,改成文字加底色
  3. 刪掉無用的 float

傳訊息給導師"三個項目都已改好並上傳",導師回覆"👍"、"這年前就可以上線了,變你的作品之一",我回覆"感謝"。

link18:00 下班

link本日心得

我本來以為今天的任務大概是沒辦法解決了,因為爬文的時候看到一些不同版本支援的功能有差異的描述,才想到更新版本這個方法。

實習日誌 2023011309:00 角色發想10:00 尋找午餐10:30 詢問任務11:30 去查資料12:00 午餐13:00 回到公司13:30 增加設定15:30 回報進度16:00 試用新版16:30 確認尺寸17:00 大功告成17:30 最後調整18:00 下班本日心得

Home

得到機會chevron_right

實習日誌chevron_right
202211 日誌chevron_right
202212 日誌chevron_right
202301 日誌chevron_right
202302 日誌chevron_right
202303 日誌chevron_right
202304 日誌chevron_right

任務成果chevron_right
任務清單chevron_right

實習結束chevron_right

返回個人網站