html2canvas 是什麼? html2canvas 是一套 JavaScript 函式庫,能夠將 HTML 元素「截圖」轉換為 Canvas 圖片,讓使用者可以將網頁內容匯出為圖片檔案。
常見應用場景:
讓使用者截圖並儲存活動票券、證書 前端產生報表圖片 網頁分享卡片的圖片產生 Firefox 上的 background-size 黑畫面問題 在使用 html2canvas 時,若元素的背景圖片使用了像素值設定尺寸(如 background-size: 200px),在 Firefox 上會出現黑畫面或背景圖無法顯示的問題。
這是因為 html2canvas 在解析特定版本 Firefox 的 background-size 數值時存在相容性問題,無法正確讀取像素值。
問題程式碼:
1 2 3 4 5 /* ❌ Firefox 上 html2canvas 可能顯示黑畫面 */ .hero { background-image: url('image.jpg'); background-size: 800px; } 解決方法:
改用 cover 或 contain 關鍵字:
1 2 3 4 5 6 7 8 9 10 11 12 13 /* ✅ 使用 cover */ .
看到還在用Google翻譯?6個超強網站讓你查到最道地的英文介紹覺得還不錯,記錄一下
Google Netspeak Just the word TANGO Verb Noun Collocation (部分中、英對照) VoiceTube The Corpus of Contemporary American English (COCA) 14個APP好像也不錯低頭族必備!英文想變好,快裝這14個實用英文學習App
Chef 與 Vagrant 簡介 Vagrant 是一套用來快速建立、管理虛擬機器環境的工具,透過撰寫 Vagrantfile 描述環境規格,讓開發者可以在不同機器上重現相同的開發環境。
Chef 則是一套基礎設施即程式碼(Infrastructure as Code)的組態管理工具,可以自動化伺服器的安裝與設定。Chef 使用稱為 Cookbook 的設定腳本來描述系統的預期狀態,例如安裝特定軟體、設定檔案權限、啟動服務等。
CHEFsupermarket 是什麼? Chef Supermarket 是官方提供的 Cookbook 集中管理平台,類似 npm 對 Node.js 的角色。開發者可以在上面:
搜尋社群分享的 Cookbook 下載並整合到自己的 Chef 專案 發布自己撰寫的 Cookbook 使用 knife 下載 Cookbook Chef 提供了 knife 命令列工具,可以直接從 Supermarket 下載 Cookbook:
1 2 3 4 5 6 7 8 # 下載指定的 cookbook knife supermarket download <cookbook-name> # 安裝 cookbook(會自動處理依賴) knife supermarket install <cookbook-name> # 搜尋 cookbook knife supermarket search <keyword> 在 Windows XP 上使用 Chef 的注意事項 舊版 Windows(如 XP)在使用 Chef 和 Vagrant 時容易遇到以下問題:
Vagrant 在啟動虛擬機前,必須先知道要用哪個 box。如果設定裡寫的是 base,但本機根本沒有這個 box,啟動時就會直接報出 The box 'base' could not be found.。這類問題本質上不難,但很適合順手整理一下基本觀念。
學校給我一台舊電腦(CPU:Sempron 64 3100+ 1.8Ghz,RAM:512MB)
於是我買了二手RAM:1G*2 300塊含運
電腦就順多了:D
Raspberry Pi 的 CPU 溫度資訊儲存在系統的虛擬檔案中,可以透過讀取該檔案來取得目前的溫度數值。這在監控 Pi 的運行狀態,或判斷是否需要加裝散熱片時非常實用。
溫度資料來源 Linux 系統將 CPU 溫度儲存在以下路徑:
1 /sys/class/thermal/thermal_zone0/temp 這個檔案裡的數值單位是千分之一攝氏度(毫攝氏度),例如讀到 47500 代表 47.5°C。
原始 Python 2 程式碼 1 2 3 4 5 # cpuTemp.py (Python 2) f = open("/sys/class/thermal/thermal_zone0/temp", "r") for t in f: print "CPU temp:" + t[:2] + "." + t[2:5] f.close() 改良版 Python 3 程式碼 Python 3 的 print 改為函式,字串處理上也建議改用整數除法,以下是較完整的版本:
1 2 3 4 5 6 7 8 9 # cpuTemp.py (Python 3) def get_cpu_temperature(): with open("/sys/class/thermal/thermal_zone0/temp", "r") as f: temp_raw = int(f.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 import urllib,random,re ip_regex = re.compile("(([0-9]{1,3}\.){3}[0-9]{1,3})") def public_ip(): ''' Returns your public IP address. Output: The IP address in string format. None if not internet connection available. ''' # List of host which return the public IP address: hosts = """http://www.
Apache Autoindex 功能說明 Apache Autoindex 是 Apache HTTP Server 的內建功能,當某個目錄下沒有 index 頁面(如 index.html)時,Apache 會自動產生該目錄的檔案清單,讓使用者可以瀏覽目錄內容。常用於建立簡易的檔案下載伺服器。
啟用 Autoindex 在 Apache 設定檔或 .htaccess 中加入:
1 Options +Indexes 若要啟用 Fancy Index(更豐富的樣式支援),需要載入 mod_autoindex 模組:
1 2 3 # Ubuntu/Debian sudo a2enmod autoindex sudo systemctl restart apache2 基本設定 1 2 3 4 5 <Directory "/var/www/html/files"> Options +Indexes +FollowSymLinks IndexOptions FancyIndexing HTMLTable VersionSort NameWidth=* DescriptionWidth=* IndexOrderDefault Descending Date </Directory> 常用 IndexOptions 選項:
選項 說明 FancyIndexing 啟用美化目錄列表 HTMLTable 用 HTML table 排版(比預設更好看) VersionSort 按版本號排序(如 file-1.
以下整理幾個程式設計相關的好用網站,方便日後查找參考。