想要做網頁截圖儲存或者是將頁面的某些html元素儲存為圖片的話，常用的外掛就是html2canvas。外掛的使用本身很簡單，這裡說的是如何將其生成的canvas儲存為圖片。
直接看程式碼，簡潔靠譜我還親自幫你實踐了。

let oCard = document.querySelector("#bsCard");//要轉換成canvas的元素
let oContainer = document.querySelector("#canvasContainer");//裝canvas的容器

html2canvas(oCard).then(function(canvas) {
	oContainer.
 
appendChild(canvas);
	//延遲執行確保萬無一失，玄學
	setTimeout(() => {
		var type = 'png';
		var oCanvas = oContainer.getElementsByTagName("canvas")[0];
		var imgData = oCanvas.toDataURL(type);//canvas轉換為圖片
		// 加工image data，替換mime type，方便以後喚起瀏覽器下載
		imgData = imgData.replace(_fixType(type), 'image/octet-stream');	
		fileDownload
 
(imgData);
	}, 0)
});

function _fixType(type) {
	type = type.toLowerCase().replace(/jpg/i, 'jpeg');
	let r = type.match(/png|jpeg|bmp|gif/)[0];
	return 'image/' + r;
};

//喚起瀏覽器下載
function fileDownload(downloadUrl){
	let aLink = document.createElement('a');
	aLink.style.display = 'none';
	aLink.href = downloadUrl;
 

	aLink.download = "下載檔名xxx.png";
	// 觸發點選-然後移除
	document.body.appendChild(aLink);
	aLink.click();
	document.body.removeChild(aLink);
}

以上程式碼會將html2canvas生成的外掛儲存為png格式的圖片，並且喚起瀏覽器的下載彈窗，這樣就可以做一些類似於生成下載名片或者二維碼一類的功能了。
順帶說一點：
如果你的要轉換的元素裡面有圖片因為跨域的原因沒有被成功截圖的話，在開啟了html2canvas的useCORS: true之後，還要讓你的後臺設定一下你的網站允許跨域，一般這樣的問題大都發生在前後端分離的情況下。