JavaScript:將 HTML 網頁上的區塊轉換成 JPG 圖檔

2020/05/16 181 網站技術 , HTML , JavaScript

這次試試是否能使用 JavaScript 就將 HTML 網頁上的區塊轉換成 JPG 圖檔,類似針對網頁局部截圖的概念,適合運用在將圖表、文字資訊等網頁上的資訊直接擷取下來成圖檔。開發上只需要用到「html2canvas」這款 JavaScript 函式庫,它能將 HTML 元素轉換成 Canvas,接著再直接用瀏覽器幫忙轉換成 JPG 圖檔並給予品質(最差為 0,最佳為 1),最後自動導出並下載,上述即為這支小程式的邏輯。


▲ 基本上一個 HTML 檔案就完成這支小程式的示範了!稍加修改後就可以用在很多用途上了!提供大家參考。

原始碼解釋:

html2canvas(document.querySelector("#capture")).then(function (canvas) { ... } → 這是 html2canvas 函式庫中用來擷取 HTML 元素的方法,將輸出 canvas 影像可供 { ... } 內使用!
a = document.createElement('a'); → 生成一個 <a> 元素
a.href = canvas.toDataURL("image/jpeg", 0.92).replace("image/jpeg", "image/octet-stream"); → 將 URL 填入 canvas 轉換成 JPG 的代碼,JPG 可填入輸出品質(最差到最佳為 0~1,預設為 0.92),並將格式再轉換為 octet-stream,這個格式可以強制瀏覽器下載。
a.download = 'image.jpg'; → 指定下載名稱
a.click(); → 自動開啟連結(直接觸發)

整支小程式包在 block_capture() 方法中,點擊按鈕才會觸發此程式。

See the Pen
JavaScript:將 HTML 網頁上的區塊轉換成 JPG 圖檔
by Feng, Cheng-Chi (@qwe987299)
on CodePen.


▲ CodePen 示範,非常簡易又方便。

⌨️ 完整原始碼

<!DOCTYPE html>
<html lang="zh-tw">

<head>
    <meta charset=" UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <title>JavaScript:將 HTML 網頁上的區塊轉換成 JPG 圖檔</title>
    <style>
        button{
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="capture" style="padding: 10px; background: #f5da55">
        <h4 style="color: #000; ">Hello world!</h4>
    </div>
    <button onclick="block_capture()">點我擷取區塊</button>
    <script>
        function block_capture() {
            html2canvas(document.querySelector("#capture")).then(function (canvas) {
                a = document.createElement('a');
                a.href = canvas.toDataURL("image/jpeg", 0.92).replace("image/jpeg", "image/octet-stream");
                a.download = 'image.jpg';
                a.click();
            });
        }
    </script>
</body>

</html>

我是直接用「html2canvas」的 CDN,建議你下載下來再使用唷!

贊助廣告 ‧ Sponsor advertisements
徵信社服務電話| 外遇疑雲| 阿宅來說徵信社故事| 如何手機監聽| 徵信社電話幾號| 徵信價目表費用| 抓姦在床蒐證| 台北立達徵信社| 免費法律諮詢專線| 馭夫術手段| 設計離婚服務| 男友感情挽回| 包二奶氾濫| 抓小三蒐證| 反跟蹤可行嗎| 尋人查址高手| 夫妻協議離婚| 委託外遇蒐證| 丈夫外遇偷腥| 名人外遇新聞| 立案專業徵信社| 婚前調查協助| 離婚扶養費| 汽車定位追蹤| 危險徵信社任務| 免費法律諮詢| 國際徵信公司|
【業界首推立達徵信FB