JS：dom-to-image網頁截圖儲存

阿新 • • 發佈：2021-01-04

文件：https://github.com/tsayen/dom-to-image

CDN

<script src="https://cdn.bootcdn.net/ajax/libs/dom-to-image/2.6.0/dom-to-image.js"></script>

程式碼示例

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=" 
width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      table {
        width: 200px;
        border-collapse: collapse;
        border: 1px solid black;
      }
      tr {
        background: green;
      }
    </style>

    <script src= 
"https://cdn.bootcdn.net/ajax/libs/dom-to-image/2.6.0/dom-to-image.js"></script>
  </head>
  <body>
    <input type="button" onclick="saveImage()" value="儲存圖片" />

    <table id="table">
      <tr>
        <td rowspan=" 
3">200</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr>
        <td rowspan="2">500</td>
        <td>600</td>
      </tr>
      <tr>
        <td>600</td>
      </tr>
    </table>

    <script>
      function saveImage() {
        domtoimage
          .toPng(document.getElementById("table"))
          .then(function (dataUrl) {
            var link = document.createElement("a");
            link.download = "my-image-name.jpeg";
            link.href = dataUrl;
            link.click();
          });
      }
    </script>
  </body>
</html>

在這裡插入圖片描述

JS：dom-to-image網頁截圖儲存

文件：https://github.com/tsayen/dom-to-image CDN <script src="https://cdn.bootcdn.net/ajax/libs/dom-to-image/2.6.0/dom-to-image.js"></script>

《SeleniumBasic 3.141.0.0 - 在VBA中操作瀏覽器》系列文章之十八：網頁截圖

SeleniumBasic的GetScreenshot方法用於對網頁或一個元素進行截圖，截圖的結果可以儲存為本地圖片，Base64字串，或者位元組陣列。

JS 如何實現網頁截圖這五種方法你知道嗎

如何利用JavaScript實現網頁截圖，包括在瀏覽器執行的JS，以及在後臺執行的nodeJs的方法。主要看了以下幾個：

JavaScript實現網頁截圖方法總結

“ 關注『前端開發部落格』公眾號，回覆加群 ” 最近研究了下如何利用JavaScript實現網頁截圖，包括在瀏覽器執行的JS，以及在後臺執行的nodeJs的方法。主要看了以下幾個：

開發函式計算的正確姿勢——網頁截圖服務

前言首先介紹下在本文出現的幾個比較重要的概念：函式計算（Function Compute）: 函式計算是一個事件驅動的服務，通過函式計算，使用者無需管理伺服器等執行情況，只需編寫程式碼並上傳。函式計算準備計算資源，並

《仁王2：完全版》Steam截圖介紹濃姬柴田勝家等

《仁王2：完全版》將於2月5日登陸Steam和PS4，國區售價249元。近日官方在Steam上釋出了遊戲新截圖，介紹了濃姬、柴田勝家，明智光秀等，一起來看看吧！

《夢幻之星OL2：新起源》新截圖獵人和槍手很威猛

世嘉推出的《夢幻之星OL2：新起源》，這兩天正在進行Xbox One和Win10版本的封閉測試。近日官方公佈了《夢幻之星OL2：新起源》新截圖，展示了獵人和槍手這兩種職業。

《尼爾：偽裝者》新截圖/藝設圖展示角色/地點

史克威爾日前展示了即將推出的JRPG《尼爾：偽裝者》的新截圖/藝設圖。這些圖片集中在展示了上次9分鐘實機遊戲片段中的地點，包括沙漠城市Façade和主角村莊。除此之外還有戰鬥鏡頭的截圖，主角可以進行強攻擊和弱攻

《黑山：藍色行動》新截圖重溫基地保安冒險之旅

近日HECU Collective開發組宣佈正在製作《黑山：藍色行動》(Black Mesa: Blue Shift)，開發組利用《黑山》資源，對Gearbox開發的《半條命：藍色行動》進行重製。開發組還發布了一些遊戲截圖，一起來欣賞下吧！

《聖戰群英傳：解放》A測截圖前瞻女王巢穴影象公開

遊戲發行商Kalypso Media 公開了幾張《聖戰群英傳：解放》Alpha版的截圖前瞻，讓大家能更加細緻的觀察“女王的巢穴”。這裡只能有一位女王：摩提斯（Mortis），而她恰好也是一位女神。她把這塊巨大的石頭當作她“舒適

微軟 Edge Canary 安卓版 92 更新：分享目錄中新增“截圖”

5 月 8 日訊息外媒 MSPoweruser 報道，微軟最近為 Android 版 Edge 引入了新的開發渠道，將程式碼與桌面應用程式統一起來。這意味著安卓的 Edge Canary 頻道每天都會看到構建更新和改進。

JavaWeb10.1【JS：DOM入門、事件繫結入門、案例】

1 <!DOCTYPE html> 2 <html lang=\"en\"> 3 <head> 4<meta charset=\"UTF-8\"> 5<title>Title</title>

Centos獲取網頁截圖

本文主要在Linux環境下通過webkit2png工具獲取網頁截圖的方式來實現將html頁面轉換成png格式的圖片。

frontEnd++：使用 html2canvas 實現瀏覽器截圖

html2canvas 可以通過純JS對瀏覽器網頁進行截圖，但截圖的精確度還有待提高官網：http://html2canvas.hertzen.com/

《高達：進化》釋出新截圖展示大魔騎兵與倒A高達

萬代南夢宮今日釋出一批免費第一人稱射擊遊戲新作《高達：進化》的最新遊戲截圖。

《夏洛克·福爾摩斯：第一章》全新截圖曝光

Frogwares在Epic商城釋出了《夏洛克·福爾摩斯：第一章》的全新截圖，本作將於今年冬季發售，登陸Xbox Series

免費多人射擊遊戲《星球大戰：獵人》公佈首批截圖

今年二月首次在任天堂直面會亮相的射擊遊戲《星球大戰：獵人（Star Wars: Hunters）》，在首次對外公開時，僅釋出了該遊戲的LOGO，並沒有公開任何情報。近日，推特使用者釋出了該遊戲的幾張截圖，先來看看效果吧。

《光明記憶：無限》全新4K截圖公佈虛幻4打造

飛燕群島工作室為其即將到來的虛幻4動作FPS《光明記憶：無限》展示了新的4K解析度截圖，這款遊戲預計在2021年內發售，登陸PC/XSX|S平臺，PS5平臺將在晚些登陸。

Python selenium PIL 全網頁滾動截圖 && headless全網頁截圖

思路先擷取當前螢幕的圖片，獲取其高度作為base高度 h，再獲取全網頁body到尾部的高度 H ，迴圈擷取圖片，再通過PIL進行拼接。

《極限競速：地平線5》大師級截圖張張都是桌布

DICE截圖大師Petri Levälahti最近在Twitter上晒出了《極限競速：地平線5》的截圖。

JS：dom-to-image網頁截圖儲存

相關推薦