利用canvas將網頁元素生成圖片並保存在本地

利用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 style="background-color: red; 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>
}

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。

更多內容本身去查看canvas API.

來源：看了一篇博客，實驗出來的，忘了地址了，哈哈

來源：https://blog.csdn.net/qq_34171965/article/details/84956510