Dom-to-image截圖將html生成圖片

OM to Image

dom-to-image是一個js庫，可以將任意dom節點轉換為矢量(SVG)或光柵(PNG或JPEG)圖像。

安裝

npm install dom-to-image -S

加載

/* in ES 6 */
import domtoimage from 'dom-to-image';
/* in ES 5 */
var domtoimage = require('dom-to-image');

用法

所有高階函數都接受DOM節點和渲染選項options ，并返回promises。

獲取PNG圖像base64編碼的data URL：

<div id="my-node"></div>

var node = document.getElementById('my-node');
// options 可不傳
var options = {}  
domtoimage.toPng(node, options)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

獲取圖像blob：

domtoimage.toBlob(document.getElementById('my-node'))
    .then(function (blob) { 
        console.log('blob', blob)
    });

獲取JPEG圖像base64編碼的data URL并下載：

domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'my-image-name.jpeg';
        link.href = dataUrl;
        link.click();
});

獲取SVGdata URL，但篩選出所有元素：

function filter (node) {
    return (node.tagName !== 'i');
}
 
domtoimage.toSvg(document.getElementById('my-node'), {filter: filter})
    .then(function (dataUrl) {
        /* do something */
});

以uint8數組的形式獲取原始像素數據，每4個數組元素表示一個像素的RGBA數據：

var node = document.getElementById('my-node');
 
domtoimage.toPixelData(node)
    .then(function (pixels) {
        for (var y = 0; y < node.scrollHeight; ++y) {
          for (var x = 0; x < node.scrollWidth; ++x) {
            pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
            /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
            pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
          }
        }
    });

options參數

Name	類型	Default	Description
filter	Function	——	以DOM節點為參數的函數。如果傳遞的節點應包含在輸出中，則應返回true(排除節點意味著也排除其子節點)
bgcolor	String	——	背景色的字符串值，任何有效的CSS顏色值。
height	Number	——	渲染前應用于節點的高度（以像素為單位）。
width	Number	——	渲染前應用于節點的寬度（以像素為單位）。
style	Object	——	object對象，其屬性在渲染之前要復制到節點的樣式中。
quality	Number	1.0	介于0和1之間的數字，表示JPEG圖像的圖像質量(例如0.92=>92%)。默認值為1.0（100%）
cacheBust	Boolean	false	設置為true可將當前時間作為查詢字符串附加到URL請求以啟用清除緩存。
imagePlaceholder	Boolean	undefined	獲取圖片失敗時使用圖片的數據URL作為占位符。默認為未定義，并將在失敗的圖像上引發錯誤。

原理

dom-to-image使用SVG的一個特性，它允許在標記中包含任意HTML內容。

遞歸地克隆原始DOM節點
計算節點和每個子節點的樣式，并將其復制到相應的克隆創建偽元素，因為它們不是以任何方式克隆的
嵌入web字體查找所有@font face聲明的web字體解析文件URL，下載相應文件 base64編碼的內聯作為data：URLs 將所有已處理的CSS放入中，然后將其附加到克隆
嵌入圖片在嵌入圖片URL 使用backgroundCSS屬性的圖片，方法類似于字體
將克隆的節點序列化為XML
將XML包裝到標記中，然后包裝到SVG中，然后使其成為data URL
或者，要以Uint8Array的形式獲取PNG內容或原始像素數據，可以創建一個以SVG為源的圖像元素，并將其呈現在已經創建的canvas上，從canvas讀取內容

部分源碼分析

dom-to-image.js

// Default impl options
var defaultOptions = {
    // Default is to fail on error, no placeholder
    imagePlaceholder: undefined,
    // Default cache bust is false, it will use the cache
    cacheBust: false
};

var domtoimage = {
    toSvg: toSvg,
    toPng: toPng,
    toJpeg: toJpeg,
    toBlob: toBlob,
    toPixelData: toPixelData,
    impl: {
        fontFaces: fontFaces,
        images: images,
        util: util,
        inliner: inliner,
        options: {}
    }
};

if (typeof module !== 'undefined')
    module.exports = domtoimage;
else
    global.domtoimage = domtoimage;

defaultOptions設置默認options選項
domtoimage的核心api:

toSvg
toPng
toJpeg
toBlob
toPixelData

例：toJpeg：將draw函數返回的canvas實例，使用canvas的toDataURL方法生成jpeg圖片。toSvg函數將遞歸地克隆原始DOM節點, 將克隆的節點序列化為XML,將XML包裝到標記中，然后包裝到SVG中，然后使其轉成dataURL。

function toJpeg(node, options) {
   options = options || {};
   return draw(node, options)
       .then(function (canvas) {
           return canvas.toDataURL('image/jpeg', options.quality || 1.0);
       });
}
復制代碼

function draw(domNode, options) {
    return toSvg(domNode, options)
        .then(util.makeImage)
        .then(util.delay(100))
        .then(function (image) {
            var canvas = newCanvas(domNode);
            canvas.getContext('2d').drawImage(image, 0, 0);
            return canvas;
        });

    function newCanvas(domNode) {
        var canvas = document.createElement('canvas');
        canvas.width = options.width || util.width(domNode);
        canvas.height = options.height || util.height(domNode);

        if (options.bgcolor) {
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = options.bgcolor;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        return canvas;
    }
}

function toSvg(node, options) {
    options = options || {};
    copyOptions(options);
    return Promise.resolve(node)
        .then(function (node) {
            return cloneNode(node, options.filter, true);
        })
        .then(embedFonts)
        .then(inlineImages)
        .then(applyOptions)
        .then(function (clone) {
            return makeSvgDataUri(clone,
                options.width || util.width(node),
                options.height || util.height(node)
            );
        });

    function applyOptions(clone) {
        if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;

        if (options.width) clone.style.width = options.width + 'px';
        if (options.height) clone.style.height = options.height + 'px';

        if (options.style)
            Object.keys(options.style).forEach(function (property) {
                clone.style[property] = options.style[property];
            });

        return clone;
    }
}

作者：知其
https://juejin.cn/post/6988045156473634852

這樣一個需求，就是在一個DIV中包含有一個Image標簽，但是在Div標簽中包含有一張背景圖片，設計圖上的樣子是這張背景圖片是有一個透明度的，但是如果直接使用opacity屬性設置的的話就會連Div中的內容的透明度也會受到影響，那么我們如何在HTML中設置div背景圖片的透明度呢？，可以通過以下幾種方法實現。

方法一：使用偽元素

這是在日常開發中被推薦使用的方法，通過這種方式實現不會影響到div中的其他內容的透明度只會影響它自己背景的透明度，詳細實現如下。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        .container::before {
            content: "";
            background-image: url('your-image.jpg');
            background-size: cover;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.5; /* 調整透明度 */
            z-index: 1;
        }

        .content {
            position: relative;
            z-index: 2;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            這里是內容
        </div>
    </div>
</body>
</html>

方法二：使用RGBA顏色疊加

這種方式比較適合那種需要給背景圖片上添加蒙版的情況，但是筆者嘗試的時候，結果實在是不盡人意。所以還是選擇了上面的推薦方法，不過這種方式要比上面的那種方式實現起來要簡單很多。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: rgba(255, 255, 255, 0.5) url('your-image.jpg') no-repeat center center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="container">
        這里是內容
    </div>
</body>
</html>

方法三：使用CSS濾鏡

這種方式實現會影響到整個的div的樣式，也就是說頁面中的內容的透明度也會受到影響，并且這種影響不會被其他樣式所改變。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: url('your-image.jpg') no-repeat center center;
            background-size: cover;
            filter: opacity(0.5); /* 調整透明度 */
        }
    </style>
</head>
<body>
    <div class="container">
        這里是內容
    </div>
</body>
</html>

以上就是實現如何調整div的背景透明度，在一些特殊場景中我們還可以通過JS的方式來實現。上面的方法中，推薦使用的是偽元素方法，因為它在修改了div背景透明度之后，并不會影響到其他的元素，RGBA色彩添加則是局限于一些色彩華麗的地方使用，而對于一些單色調的內容來講這種方式實現效果不是太好。通過CSS過濾樣式，雖然是最直接的方式，但是如果在div內部有內容的情況下會影響到整個組件體系的樣式。

在實際開發中，我們可以選擇合適的方式來實現這個需求。當然還有其他的實現方式，有興趣的讀者可以留言我們一起討論。

么是 JPG 格式照片

JPEG（Joint Photographic Experts Group）是用于數字圖像壓縮的一種標準，其文件擴展名為 .jpg 或 .jpeg。這種格式通過有損壓縮算法來減少文件大小，非常適合存儲和傳輸具有豐富細節的照片，如風景、人物等。

JPG 格式在保持高質量圖像的同時，可以大幅度減小文件體積，使其成為網絡、電子郵件以及移動設備上分享照片的理想選擇。

JPG 圖片格式轉換的重要性

盡管 JPG 格式因其高效率而廣受歡迎，但在某些場景下，可能需要將 JPG 轉換為其他格式，比如 PNG（無損壓縮，支持透明背景）、GIF（動畫圖像）、TIFF（專業用途，高保真度）、SVG（矢量圖形，可無限縮放）等。

不同的格式適用于不同的需求，例如網頁設計、打印出版、專業編輯或是動畫制作等。

使用簡鹿格式工廠軟件進行 JPG 格式轉換

簡鹿格式工廠是一款功能強大的多媒體文件轉換軟件，它不僅支持音頻和視頻格式的轉換，還提供了豐富的圖片格式轉換選項。以下是使用簡鹿格式工廠將 JPG 圖片轉換為其他格式的步驟：

1、下載并安裝簡鹿格式工廠，啟動軟件并選擇“圖片格式轉換”選項。

2、點擊“添加文件”按鈕，從你的電腦中選擇想要轉換的 JPG 圖片。在軟件界面中，選擇你希望轉換成的目標格式，例如 PNG、GIF、TIFF 或 SVG 等。

3、根據需要調整圖片的質量、分辨率或尺寸等參數。確認所有設置無誤后，點擊“全部轉換”按鈕，簡鹿格式工廠將自動處理轉換任務。轉換完成后，軟件會提示你文件已保存的位置，你可以在指定目錄下找到轉換后的圖片。

為什么常見的圖片都是 JPG 格式？

JPG 使用的是有損壓縮技術，這意味著在壓縮過程中會丟失一些圖像數據，但這通常不會對視覺質量產生顯著影響。由于這種高效的壓縮，JPG 文件相對較小，這使得它們在網絡上傳輸、存儲和分享時非常實用。

幾乎所有的操作系統、瀏覽器、圖像編輯軟件和移動設備都支持 JPG 格式。這種廣泛的兼容性確保了無論在哪種設備上查看或編輯圖片，都不會遇到格式不兼容的問題。

然而，JPG 格式并非沒有缺點。例如，由于是有損壓縮，重復保存和編輯 JPG 圖像會導致質量下降，即所謂的“世代損失”。此外，JPG 不支持透明度，如果需要透明背景，則 PNG 等其他格式更為合適。

在近年來，隨著網絡速度的提升和存儲成本的降低，一些新的圖片格式如 WebP 和 AVIF 也開始流行，這些格式在提供更好的壓縮率和質量的同時，也支持更多的特性，如透明度和動畫。不過，由于 JPG 的廣泛兼容性和歷史慣性，它仍然是一種非常流行的圖片格式。

總結

掌握 JPG 格式照片的特性和轉換技巧對于任何從事創意工作的人士來說都是十分必要的。使用簡鹿格式工廠這樣的工具，可以輕松實現不同格式之間的轉換，滿足各種應用場景的需求。無論是為了提高工作效率，還是為了追求更佳的視覺效果，正確的圖片格式轉換都是關鍵所在。

除了使用簡鹿格式工廠外，目前仍然有非常多的圖像格式轉換工具，無論是在線還是本地或者使用命令行方式手動執行，它都可以把某些圖像格式轉為特定的圖像格式。

在線咨詢

上一篇：萬能的HTML5，這次我們用javascript畫流動的瀑布
下一篇：word個人簡歷免費模板下載

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商