利用canvas將網頁元素生成圖片並保存在本地,首先引入三個文件：
<script type="text/JavaScript" src="js/html2canvas.js"></script>
<script type="text/JavaScript" src="js/base64.js"></script>
<script type="text/JavaScript" src="js/canvas2image.js"></script>
<div id="view" style=" width: 700px; height: 500px;">
//canvas截圖為document.body上的元素
html2canvas(document.body).then(function (canvas) {
canvas.setAttribute('id','canvasImg'); //給canvas添加id
// document.body.appendChild(canvas)
document.getElementById('images').appendChild(canvas) //添加canvas圖給元素
});
let Download=document.getElementById('Download');
Download.onclick=function () { //給下載節點綁定事件
let oCanvas=document.getElementById('canvasImg'); //獲取canvas的id
console.log(oCanvas)
// 將canvas圖片通過Canvas2Image轉成的img元素引入的圖片
let img=Canvas2Image.saveAsJPEG(oCanvas,true).getAttribute('src');
console.log(img);
saveFile(img,'hlr.png') //調用下載函數，傳Canvas2Image圖片地址，下載時保存的圖片的名稱
};
注：createElementNS() 方法可創建帶有指定命名空間的元素節點。 createElementNS(ns,name) > createElementNS() 方法與 createElement() 方法相似，只是它創建的 Element > 節點除了具有指定的名稱外， > 還具有指定的命名空間。只有使用命名空間的 XML 文檔才會使用該方法。
let saveFile=function (data,filename) {
let save_link=document.createElementNS('http://www.w3.org/1999/xhtml','a'); //img表示生成img元素或a元素或則可以放圖片地址的元素
save_link.href=data; //img 元素中圖片引入用src，a元素中圖片的引入用href等等
save_link.download=filename; // 下載的名稱
var event = document.createEvent('MouseEvents');//創建event事件
console.log(event);
//initMouseEvent 方法用於初始化通過 DocumentEvent 接口創建的 MouseEvent 的值, 詳見下文：
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
console.log(save_link)// <a href=data:image/jpeg:base64.....></a>
素材公社https://www.wode007.com/sites/73209.html 愛圖網https://www.wode007.com/sites/73208.html
initMouseEvent 方法用於初始化通過 DocumentEvent 接口創建的 MouseEvent 的值。 此方法只能在通過 dispatchEvent 方法指派 MouseEvent 之前調用，盡管在該階段可以多次調用它（如有必要）。如果被多次調用，則最后一次調用優先。
其他指定事件方法：
typeArg - 指定事件類型。
canBubbleArg - 指定該事件是否可以 bubble。
cancelableArg - 指定是否可以阻止事件的默認操作
viewArg - 指定 Event 的 AbstractView。
detailArg - 指定 Event 的鼠標單擊量。
screenXArg - 指定 Event 的屏幕 x 坐標
screenYArg - 指定 Event 的屏幕 y 坐標
clientXArg - 指定 Event 的客戶機 x 坐標
clientYArg - 指定 Event 的客戶機 y 坐標
ctrlKeyArg - 指定是否在 Event 期間按下 control 鍵
altKeyArg - 指定是否在 Event 期間按下 alt 鍵。
shiftKeyArg - 指定是否在 Event 期間按下 shift 鍵。
metaKeyArg - 指定是否在 Event 期間按下 meta 鍵。
buttonArg - 指定 Event 的鼠標按鍵。
relatedTargetArg - 指定 Event 的相關 EventTarget。