1. 程式人生 > >將網頁的dom節點轉換成img並下載下來

將網頁的dom節點轉換成img並下載下來

這裡需要用到一個依賴html2canvas,使用npm安裝即可:

npm install html2canvas --save-dev

然後在頁面中引入即可使用。

利用了a標籤的下載功能 dom儲存為img的程式碼如下

 function saveAsImg()  {
    // 先獲取你要轉換為img的dom節點    
    var node = document.getElementById('app');
    // html2canvas接收dom節點,返回canvas,即node生成的canvas
    html2canvas(node).then((canvas){
      var
url = canvas.toDataURL(); var a=document.createElement('a'); a.download='今日日報';//設定圖片名稱 var event = new MouseEvent('click'); a.href=url; a.dispatchEvent(event);//觸發a的單擊事件 }); }