Html2canvas
on 2020-09-03
網站直接網頁截圖
基本上就是把要截圖的內容轉成 canvas 物件
再轉成圖片下載即可
現成套件 html2canvas
https://html2canvas.hertzen.com/
但是如果要截圖的內容有用外部 url 載入的圖片需要注意一下 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.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
問題
CORS 問題
因為在瀏覽器上面 XMLHttpRequest 物件處理會有 CORS 問題要處理
需要在要處理的圖片 url 處理 CORS
refer - Allowing cross-origin use of images and canvas