[{"data":1,"prerenderedAt":143},["ShallowReactive",2],{"portfolio-eraser-tools":3},{"id":4,"title":5,"body":6,"category":122,"cover":123,"date":124,"description":125,"extension":126,"featured":127,"links":128,"meta":130,"navigation":127,"path":131,"seo":132,"status":133,"stem":134,"tags":135,"__hash__":142},"portfolio\u002Fportfolio\u002Feraser-tools.md","Eraser Tools",{"type":7,"value":8,"toc":113},"minimark",[9,14,23,26,29,32,60,63,69,75,81,84,104,107,110],[10,11,13],"h2",{"id":12},"為什麼做這個","為什麼做這個？",[15,16,17,18,22],"p",{},"工作上偶爾需要一些「做一件事」的小工具：壓縮圖片、轉換顏色格式、快速錄個畫面。大多數線上工具不是充斥廣告，就是要求上傳到他們的伺服器。我想要的是：",[19,20,21],"strong",{},"打開就能用、資料不離開瀏覽器、速度快","。",[15,24,25],{},"於是從一兩個工具開始，慢慢累積成現在這個樣子。",[10,27,28],{"id":28},"工具列表",[15,30,31],{},"目前涵蓋幾個主要類別：",[33,34,35,42,48,54],"ul",{},[36,37,38,41],"li",{},[19,39,40],{},"圖片工具","：背景移除、GIF 製作、圖片壓縮、EXIF 清除、圖片比對、全景轉換",[36,43,44,47],{},[19,45,46],{},"設計工具","：色彩轉換（HEX\u002FRGB\u002FHSL\u002FOKLCH）、顏色漸層產生器、網頁截圖",[36,49,50,53],{},[19,51,52],{},"開發工具","：JSON 格式化、Base64、JWT 解碼、Cron 解析、RegEx 測試",[36,55,56,59],{},[19,57,58],{},"實用工具","：螢幕錄製、P2P 傳檔、Markdown 編輯器、Pomodoro 計時器",[10,61,62],{"id":62},"技術架構",[15,64,65,68],{},[19,66,67],{},"前端","：Nuxt 3（SSG 模式）、Vue 3 Composition API、TypeScript、Nuxt UI、Tailwind CSS",[15,70,71,74],{},[19,72,73],{},"國際化","：支援繁體中文、簡體中文、英文、日文",[15,76,77,80],{},[19,78,79],{},"部署","：GitHub Actions 自動建置 → GitHub Pages",[10,82,83],{"id":83},"設計原則",[33,85,86,92,98],{},[36,87,88,91],{},[19,89,90],{},"純前端運算","：所有工具在客戶端執行，圖片、影片等資料不上傳伺服器",[36,93,94,97],{},[19,95,96],{},"漸進式 PWA","：離線可用，可加入主畫面",[36,99,100,103],{},[19,101,102],{},"廣告歸廣告","：只有版面明確標示的 AdSense 位置，沒有追蹤腳本混進工具邏輯",[10,105,106],{"id":106},"心得",[15,108,109],{},"這個網站本身就是一個持續進行的實驗。每加一個工具，都是在解決「自己真的遇到的問題」——而不是為了湊數字。目前工具數量已超過 30 個，每一個都有對應的使用場景。",[15,111,112],{},"最有成就感的部分，是看到 P2P 傳檔功能完成後：真的可以在兩台電腦之間直接傳檔案，完全沒有中間伺服器。瀏覽器能做到的事情，還比大多數人想的多。",{"title":114,"searchDepth":115,"depth":115,"links":116},"",2,[117,118,119,120,121],{"id":12,"depth":115,"text":13},{"id":28,"depth":115,"text":28},{"id":62,"depth":115,"text":62},{"id":83,"depth":115,"text":83},{"id":106,"depth":115,"text":106},"web-app","\u002Fimages\u002Fportfolio\u002Feraser-tools.png","2026-02-26T00:00:00.000Z","一個不斷成長的線上工具箱。圖片處理、色彩轉換、螢幕錄製、P2P 傳檔……全部跑在瀏覽器裡，沒有後端、沒有帳號、沒有廣告追蹤。","md",true,{"website":129},"https:\u002F\u002Fwww.eraser.tw\u002F",{},"\u002Fportfolio\u002Feraser-tools",{"title":5,"description":125},"active","portfolio\u002Feraser-tools",[136,137,138,139,140,141],"Nuxt 3","Vue 3","TypeScript","Tailwind CSS","Nuxt UI","i18n","D_b-8qnc9JMsxf6LSxh5gheU4QTi2PdWD9mrFqfG8Uc",1774434898773]