# 網站直接網頁截圖 基本上就是把要截圖的內容轉成 canvas 物件 再轉成圖片下載即可 ## 現成套件 html2canvas https://html2canvas.hertzen.com/ 但是如果要截圖的內容有用外部 url 載入的圖片需要注意一下 CORS 問題(canvas 的限制) ## 解決外部 url 載入圖片時 CORS 問題 原理 把外部載入的圖片轉換成二進制再轉成 dataurl 因為在 browser 上面可以解析與渲染 dataurl 所以就可以呈現在 canvas 裡面 這樣之後要截圖下載這個 canvas 的內容也沒問題 ## 補充轉換圖片的機制(解決載入外部圖片 CORS 問題) ### 處理方式 - 圖片轉 blob 圖片轉成 blob function toDataURL(url, callback) { var xhr = new XMLHttpRequest(); xhr.onload = function() { var reader = new FileReader(); reader.onloadend = function() { callback(reader.result); } reader. ...