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

全棧攻城獅-每日更新原創IT編程技術及日常實用視頻。

主要內容：這是HTML課程的第五課，主要講解HTML的圖片和超鏈接。讓自己設計的網頁更加多元素。

上節回顧

在上節中主要講解了HTML的文字標簽和格式標簽。上篇請戳→→04程序員定要學HTML，字體段落標簽介紹，60秒搞定

其實如果沒有記住也無所謂。畢竟這些標簽都是HTML中比較常用的，在以后的相關的案例中也會使用。此系列教程主要講解HTML從基礎到精通。自己能夠設計一個完整的前端網頁項目。

程序員寫代碼

圖片

在HTML中添加圖片其實很簡單，就是添加一個img的標簽。

圖片標簽的語法

一般有src、alt、width、height四種屬性就夠用了。

效果：

圖片的顯示效果

圖片路徑的寫法

src表示的是圖片的路徑，這里面的值應該怎么寫呢？

（1）html文件和圖片在相同一個文件夾下。

HTML文件和圖片文件在相同的目錄下，可以直接書寫文件的名稱。

寫文件名的寫法，如上面的HTML

（2）圖片在HTML文件所在目錄的文件夾內：

如圖：

圖片文件在文件夾內

此時需要加上文件夾名稱，并加上“/”表示下層目錄：

下層目錄的圖片寫法

（3）圖片文件在上層目錄

如果圖片在HTML文件所在的上層目錄，則需要寫“..”表示向上一級。如圖：

上層目錄

超鏈接

超鏈接就是可以鏈接到某個資源的東西，比如我們打開百度首頁搜索后，產生的就是超鏈接：

這些藍字超鏈接

這些藍色的文字標題，我們點擊之后可以跳轉到新的網站。這就是超鏈接。下面我們自己寫一個超鏈接：

超鏈接的寫法

超鏈接預覽

超鏈接中的屬性

超鏈接中的潮涌屬性包括：href（網頁地址）、title（說明描述）、target（打開網頁的位置）、name（名稱）。

其中href支持帶有任何協議的連接。title是對超鏈接的說明。

程序員

target包括四個值：

_blank

在新的窗口打開連接

_self

在當前窗口打開超鏈接

_parent

在父窗口打開超鏈接，這個后面會說，不常用

_top

在整個窗口中打開被鏈接文檔。

每天一個知識點，帶你邁向軟件編程大神，一起努力吧。

端開發人員在構建網站時需要做的一個決定是引入圖片的方式。它可以是<img>標簽，或者是通過CSS background 屬性，還可以使用 SVG<image>。選擇正確的方式是很重要的，它對性能和可訪問性有很大的影響。

在本文中，我們會學習引入圖像的各種方式，以及每種方式的優點和缺點，以及何時使用和為什么使用它們。

HTML img 元素

最簡單的情況下，img元素必須包含src屬性:

<img src="cool.jpg" alt="">

設置寬度和高度屬性

在頁面加載時，它們會在頁面圖像加載時發生一些布局變化。為了避免這種情況，我們可以為它設置width和height屬性:

<img src="cool.jpg" width="200" height="100" alt="">

雖然對某些人來說，這可能看起來太過簡單了，但它是有用的。我們用圖例的方式來理清這個概念：

我們看到到右側圖片即使尚未加載仍保留了空間？那是因為設置了寬度和高度。

通過 CSS 隱藏圖像

圖像可以用 CSS 隱藏。但是，它仍將加載在頁面中。因此，在執行此操作時請小心。如果一個圖像應該被隱藏，那么它可能是出于裝飾的目的。

img {
    display: none;
}

同樣，上面的方法也不能阻止瀏覽器加載圖像，即使它在視覺上是隱藏的。原因是<img>被認為是一個被替換的元素，所以我們無法控制它所加載的內容。

可訪問性問題

通過將alt屬性設置為有意義的描述，用來訪問 HTML 圖像，這對于屏幕閱讀器用戶非常有幫助。

然而，如果一個alt描述是不需要的，請不要刪除它，如果你這樣做，圖像src將被讀出,這對可訪問性非常不利。

不僅如此，如果圖像因為某種原因沒有加載，并且它有一個清晰的alt，它將作為一個回退顯示。同樣通過圖例來演示一下。

假設我們有以下圖片：

<img class="food-thumb" width="300" height="200" src="cheescake.jpg">

<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">

當src無效，圖片沒有加載時。第一個沒有alt屬性，而第二個是空的alt屬性，下面是它們的視覺效果：

沒有alt的圖片仍然保留了它的空間，這很混亂，而且不利于訪問。而另一個alt為空的圖片，會折疊起來看起來像一個小點，這里因為它有邊框。

但是，當alt屬性有值，它看起來是這樣的：

這不是一個很好的反饋嗎?此外，當圖像源失敗時，可以向它們添加偽元素。

響應式圖像

<img>的優點在于可以針對特定視口大小將其擴展為具有多個版本的照片。我們有兩種不同的方式來生成一組響應式圖像：

1.srcset屬性

<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">

這很簡單。對我來說，srcset可以根據屏幕寬度顯示多個圖像尺寸，這并不是一種完美的解決方案。它讓瀏覽器選擇合適的圖像，而我們對此無能為力。

2.picture 標簽

另一種選擇是使用<picture>元素。我更喜歡這種方式，因為它更容易預測。

事例源碼：https://codepen.io/shadeed/pen/d703aee137f38c138f2323a0252548ac?editors=1100

調整圖像大小

對于<img>，我們還可以使用的一組很好的特性object-fit和object-position。它們可以控制<img>的大小和定位，就像CSS背景圖像。

object-fit 值有：fill, contain, cover, none, scale-down。例如：

img {
    object-fit: cover;
    object-position: 50% 50%;
}

CSS背景圖片

使用CSS背景顯示圖像時，它需要一個具有內容或特定寬度或高度的元素。通常，背景圖像的主要用途應該是用于裝飾目的。

何使用 CSS 背景圖片

首先，我們需要一個元素

// html
<div class="element">Some content</div>

// css
.element {
    background: url('cool.jpg');
}

多個背景

使用CSS背景圖片的好處是可以設置多個背景。考慮以下示例：

.element {
    background: url('cool-1.jpg'), url('cool-2.jpg');
}

隱藏圖像

我們可以在特定視口中隱藏和顯示圖像，如果未使用CSS設置圖片，則不會下載該圖片。與使用<img>相比，這是一個額外的好處。

在上面的示例中，我們有一個背景圖像，僅在視口寬度大于700px時顯示。

可訪問性問題

如果使用不當，背景圖像可能會影響可訪問性。例如，將其用于文章主題，這對于文章至關重要。

非開發人員無法下載

普通人知道，如果要保存圖像，只需單擊鼠標左鍵，然后選擇保存即可。CSS　背景圖片并非如此，我們必須先檢查元素，然后在DevTools中的url中打開鏈接，然后才能下載隨CSS添加的圖像。

偽元素

可以將偽元素與CSS背景圖像一起使用，例如在圖像頂部顯示覆蓋圖。對于<img>這是不可能的，直到我們為疊加層添加單獨的元素。

SVG Image

SVG被認為是一種圖像，它最大的功能是在不影響質量的情況下進行縮放。此外，使用SVG，我們可以嵌入JPG、PNG或SVG圖像。參見下面的 HTML:

你是否注意到了prepareAspectRatio？它的作用是可以讓圖像占據SVG的整個寬度和高度，而不會被拉伸或壓縮。

當<image>寬度較大時，它將填充其父級（SVG）寬度而不會拉伸。

這非常類似于 CSS 中的object-fit: cover或background-size: cover。

可訪問性問題

關于SVG 的可訪問性，這使我想起了<title>元素。例如，我們可以像下面這樣添加它：

我們還可以使用<desc>元素

非開發人員無法下載

必須先檢查元素并復制圖像的URL，然后才能下載嵌入SVG的圖像。但是，如果我們要防止用戶下載特定的圖像，這可能是一件好事。

用例

Hero Section

在構建hero section時，有時我們需要在標題和其他內容下方的圖像。參見下圖：

一些要求：

背景圖片能夠動態替換
圖片有一個覆蓋層，讓閱讀更容易
圖像有三種尺寸:小號、中號和大號。每一個都是針對一個特定的視口。

在開始解決方案之前，讓我們先問問自己這種背景的性質。這是一些入門問題：

為用戶保留這個圖像很重要嗎，還是可以跳過它？
我們是否需要在所有視口尺寸上使用它？
它是靜態的還是動態變化的？

解決方案1

通過使用多個CSS背景，我們可以將一個背景作為疊加層，將另一個背景作為實際圖像。請看下面的CSS：

.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), 
                                      rgba(0, 0, 0, 0.4)), var('landscape.jpg');
    background-repeat: no-repeat;
    background-size: 100%, cover;
}

雖然此解決方案有效，但可以使用 JavaScript 動態更改背景圖片。見下面：

<section class="hero" 
   style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
  <!-- Hero content -->
</section>

這里添加了一個內聯樣式。雖然這是可行的，但它看起來很丑，而且不實用。

也許我們可以使用CSS變量？讓我們來探索一下。

<section class="hero" style="--bg-url: url('landscape.jpg')">
  <!-- Hero content -->
</section>

現在，我們可以輕松地更新--bg-url變量來動態更改背，這比內聯的東西好一百萬倍。

小結：

這種方案只有在圖片不重要才適用
這種方案只適合一些靜態網站，因為沒有從后臺拉取圖片

事例源碼：https://codepen.io/shadeed/pen/17978a2d824fd51a3b27c2c2d099a522

解決方案2

該方案是可以使用一個 img 標簽：

<section class="hero">
  <h2 class="hero__title">Using Images in CSS</h2>
  <p class="hero__desc">An article about which and when to use</p>
  <img src="landscape.jpg" alt="">
</section>

在CSS中，我們需要將圖片絕對定位在內容下方，并且還需要使用偽元素作為疊加層。

此解決方案的優點在于，可以輕松更改圖片的src屬性。同樣，如果圖像很重要，它將會更加有用。

另外，我喜歡使用HTML <img>的功能是能夠在未加載圖片的情況下添加回退。回退至少可以使內容保持可讀性。

.hero img {
    /* Other styles */
    background: #2962ff;
  }

在圖片源路徑不對時，背景顏色是一個代替方面。

事例源碼：https://codepen.io/shadeed/pen/73a2ca78141fcab39d6db9d5bd982728?editors=1100

網站 Logo

網站 Logo是很重要的，因為它可以將網站與其他網站區分開。要嵌入徽標，我們有一些選擇：

img -> png,jpg, orsvg
內聯SVG
背景圖

接下來，我們來看看哪種方式更合適。

帶有很多細節的 Logo

當徽標具有許多細節或形狀時，將其用作嵌入式SVG可能沒有好處。我建議使用<img>，圖像類型可以是png，jpg或svg。

需要動畫的簡單 Logo

我們有一個簡單的logo ，其中包含形狀和文字。懸停時，形狀和文本需要更改顏色。怎么做？對我來說最好的解決方案是使用嵌入式SVG。

HTML

CSS

.logo rect,
.logo text {
  transition: 0.3s ease-out;
}

.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
}

事例源碼：https://codepen.io/shadeed/pen/4005077cc543647148007f4834c0585c?editors=0100

響應 Logo

這讓我想起了Smashing Magazine的logo。我喜歡它從一個小圖標變成一個完整的徽標。參見下面的模型：

完美的解決方案是使用<picture>元素，可以在其中添加logo 的兩個版本。如下所示：

<a class="logo" href="/">
    <picture>
      <source media="(min-width: 1350px)" srcset="sm-logo--full.svg">
        <img src="sm-logo.svg" alt="Smashing Magazine">
        </picture>
  </a>

在CSS中，我們需要將視口的寬度更改為等于或大于1350px。

.logo {
  display: inline-block;
  width: 45px;
}

@media (min-width: 1350px) {
  .logo {
    width: 180px;
  }
}

這是簡單而直接的解決方案。

事例源碼：https://codepen.io/shadeed/pen/6cf55d4e87b7c443820bd5f8694587a8?editors=1100

帶有漸變的Logo

當 logo 具有漸變時，從Illustrator或Sketch等設計應用程序將其導出的過程可能并不完美，有時會中斷。

使用SVG，我們可以輕松地為logo添加漸變。我添加了<linearGradient>并將其用作文本填充。

事例源碼：https://codepen.io/shadeed/pen/9bf3bee3d08a40411effb5d65f25b5c1?editors=1100

用戶頭像

對于用戶頭像，它們具有很多形狀，但最常見的是矩形或圓形。在此用例中，會介紹一個對你有用的重要技巧。

首先，讓我們看下面的模型。請注意，我們有一個完美的化身，并且100％清晰。

但是，當用戶上傳半白色頭像或非常淺的頭像時，這個設計就不太好了。

請注意，在上面的模型中，除非真正專注看，否則尚不清楚其中是否有一個圓圈。這是一個問題。為了解決這個問題，我們應該在頭像內添加邊框，以防圖像太亮看不清除。

我們有幾個選擇

img元素
img 和 div 元素
div與CSS背景
SVG image

哪一個最好？我們來探索探索。

使用 HTML `<img>`

你可能首先想到的是添加一個邊框，對吧?讓我們來探討一下這個問題。

.avatar {
    border: 2px solid #f2f2f2;
}

我們的目標是使內部邊框與圖像融合在一起，這種不太實用。

使用 `<img>` 和 `<div>` 元素

現在的問題是，要添加內部邊框，我們不能使用box-shadow，因為它無法在圖像上使用。解決方案用<div>包裹頭像中，并添加專用于內部邊框的元素。

HTML

<div class="avatar-wrapper">
     <img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
     <div class="avatar-border"></div>
</div>

CSS

.avatar-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
}

.avatar-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

通過在<div>上使用透明度10%黑色的邊框，我們可以確保邊框與深色圖像融合，并且只有在圖像較亮的情況下才可見。參見下面的模型：

事例地址：https://codepen.io/shadeed/pen/da23d9a18dac14692a97e1bc6e86a5ff?editors=1100

使用`<div>`與CSS背景

如果我要使用<div>來顯示頭像，則可能表示該圖像具有裝飾性。我記得一個用例，它是分散在頁面中的隨機頭像。

HTML

<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>

CSS

.avatar {
  background: var(--img-url) center/cover;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}

事例地址:https://codepen.io/shadeed/pen/39eb9dac364ec15b9ab9bae7fe3a7148?editors=0100

使用 SVG `<image>`

對我來說，這是最有趣的解決方案。我在檢查Facebook的新設計時注意到了它。

先對其進行剖析，它包含以下內容：

用于將圖像剪切為圓形(circle )的蒙版(mask )
對其應用了蒙版的組
image本身帶有preserveAspectRatio =“ xMidYMid”
用于內邊界的圓

circle {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}

事例地址：https://codepen.io/shadeed/pen/b17d34b5c23cc90fdc4573779544c8c7?editors=0100

作者：ahmad shadeed 譯者：前端小智

原文：https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

在線咨詢

上一篇：HTML 簡單的<sup> 標簽
下一篇：HTML 常用頭部標簽（meta）

您的項目需求

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

整合營銷服務商

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

OM to Image

安裝

加載

用法

options參數

原理

部分源碼分析

上節回顧

圖片

圖片路徑的寫法

超鏈接

超鏈接中的屬性

HTML img 元素

設置寬度和高度屬性

通過 CSS 隱藏圖像

可訪問性問題

響應式圖像

調整圖像大小

CSS背景圖片

何使用 CSS 背景圖片

多個背景

隱藏圖像

可訪問性問題

非開發人員無法下載

偽元素

SVG Image

可訪問性問題

非開發人員無法下載

用例

Hero Section

解決方案1

解決方案2

網站 Logo

帶有很多細節的 Logo

需要動畫的簡單 Logo

響應 Logo

帶有漸變的Logo

用戶頭像

使用 HTML `<img>`

使用 `<img>` 和 `<div>` 元素

使用`<div>`與CSS背景

使用 SVG `<image>`

您的項目需求