頁(yè)上的所有內(nèi)容，包含文字、圖片、音樂(lè)、視頻、Flash等等都是有地址的。當(dāng)你在論壇發(fā)帖子，或者在博客里寫(xiě)日志的時(shí)候，只有文字可以直接從Word里面粘貼過(guò)來(lái)。必須先把其他的東西上傳到網(wǎng)絡(luò)服務(wù)器的硬盤(pán)上，獲得每個(gè)文件的相應(yīng)地址，再用HTML代碼插入到帖子或者日志里。

你不可能直接把Word里面的圖片粘貼到網(wǎng)頁(yè)上的，但是你可把包含圖片的內(nèi)容從網(wǎng)頁(yè)上粘貼到Word里（在你粘貼的時(shí)候，圖片已經(jīng)從網(wǎng)站上下載到瀏覽器里了，進(jìn)而可以完全復(fù)制到Word文件里了），或者把包含圖片的內(nèi)容從一個(gè)網(wǎng)頁(yè)上粘貼到你的帖子或日志里（事實(shí)上你粘貼的只是HTML代碼）。

簡(jiǎn)單來(lái)說(shuō)，就是圖片是一堆數(shù)據(jù)信息，如果你需要它顯示在網(wǎng)頁(yè)上，你需要先將這堆數(shù)據(jù)經(jīng)過(guò)網(wǎng)絡(luò)上傳到服務(wù)器端，然后經(jīng)過(guò)自動(dòng)處理以后才能顯示出來(lái)。

嘍大家好，我是胖達(dá)。本期視頻來(lái)看看路徑相關(guān)的內(nèi)容。我們知道在網(wǎng)頁(yè)中存在很多的圖片，如果把這些圖片和html文檔放在一起，這樣不光不美觀，管理起來(lái)也非常不方便。通常會(huì)新建一個(gè)專(zhuān)門(mén)用來(lái)管理圖像資源的文件夾，當(dāng)需要查找圖像的時(shí)候就會(huì)選擇使用路徑的方式來(lái)指定圖像文件的位置。

路徑的類(lèi)型又分為兩種，第一種是相對(duì)路徑，第二種是絕對(duì)路徑。今天先來(lái)了解一下相對(duì)路徑。相對(duì)路徑是相對(duì)于當(dāng)前文件的位置來(lái)表示資源，也就是圖片位置的路徑表達(dá)方式。簡(jiǎn)單來(lái)說(shuō)就是圖片相對(duì)于當(dāng)前html文檔的位置。這里把相對(duì)路徑的分類(lèi)給大家列出來(lái)了，一個(gè)一個(gè)往下看。

·首先是同級(jí)路徑。同級(jí)路徑不需要在html里面寫(xiě)任何符號(hào)，只需要將文件名寫(xiě)到html屬性里就可以了。在代碼里看一下，這里有一個(gè)image，點(diǎn)jpg的圖片和html文檔處于同一級(jí)，所以在html的屬性里直接寫(xiě)image，點(diǎn)jpg保存一下看看效果。

可以看到現(xiàn)在圖片是正常展示的，同級(jí)路徑下只需要在html屬性里完整填寫(xiě)圖像文件的名稱(chēng)就可以了。

·再來(lái)看第二個(gè)下級(jí)路徑。當(dāng)圖像文件位于html文件下一集時(shí)，需要在html屬性里完整填寫(xiě)同級(jí)文件夾的名稱(chēng)，然后斜杠寫(xiě)出對(duì)應(yīng)圖片文件的名稱(chēng)。

→首先打開(kāi)資源文件夾，在這里新增一個(gè)images的文件夾。將image圖片文件復(fù)制一份放到images文件夾里。

→打開(kāi)vscode，新建一個(gè)gtml文檔，這里新增一個(gè)image標(biāo)簽。

→在左側(cè)資源管理器中剛剛新增的images文件夾已經(jīng)顯示出來(lái)了，打開(kāi)以后會(huì)發(fā)現(xiàn)里面有一個(gè)image，點(diǎn)jpg的圖片。把這個(gè)路徑寫(xiě)一下，在src屬性里面寫(xiě)入位于當(dāng)前html文件同級(jí)的images文件夾的名稱(chēng)，使用符號(hào)斜杠找到image，點(diǎn)gpg，看一下效果。此時(shí)圖片也完整顯示出來(lái)了。

→如果在amager四文件夾里還有一個(gè)amager四文件夾，下級(jí)路徑又該怎么寫(xiě)？在amager文件夾里再新建一個(gè)文件夾，打開(kāi)vscod，在左側(cè)的資源管理器中a major s文件夾下面又新增了一個(gè)a major s文件夾，在這里面又放了一張圖片。

這張圖片應(yīng)該怎樣讓它展示出來(lái)？一起來(lái)看一下。

→首先找到同級(jí)的images文件夾，使用符號(hào)斜杠，此時(shí)vscode會(huì)提供給兩個(gè)選項(xiàng)，一個(gè)是imagers文件夾，另一個(gè)是imager.gpg。選擇imagers，imagers文件夾里面的imager.gpg的文件了，保存一下看看效果。

在瀏覽器中這兩張圖片都完美的展現(xiàn)出來(lái)了。

最后來(lái)看一下相對(duì)路徑里面的。上級(jí)路徑使用的符號(hào)是點(diǎn)點(diǎn)杠。上級(jí)路徑又應(yīng)該怎么理解？也就是圖像文件是位于當(dāng)前這個(gè) hd ml文件的上一集。

在練習(xí)文件夾里新增一個(gè)名為 hd ml的文件夾，打開(kāi)vs code，選擇剛剛新增的文件夾，選擇新建文件，這里需要新增一個(gè) hd ml文檔。在當(dāng)前 hd ml文檔中，如果想要調(diào)用上一級(jí)的 image 點(diǎn) j p g 的圖片應(yīng)該怎么做？在 sr c 屬性里面使用點(diǎn)點(diǎn)杠。

這里 vs code提供了上一集路徑中存在的文件，選擇 image 點(diǎn) j p g，在瀏覽器中看下效果，此時(shí)圖片也是正常顯示的。如果hd ml文件藏得更深一些，把當(dāng)前的文件復(fù)制一份，新增一個(gè)hd ml文件夾，將復(fù)制的文檔粘貼一下，打開(kāi)剛剛復(fù)制的文檔，修改sr c屬性里面的值，使用點(diǎn)點(diǎn)杠。

此時(shí)是沒(méi)有找到 amage 點(diǎn) j p g 的文件，這個(gè)時(shí)候就需要重復(fù)剛剛的操作，點(diǎn)點(diǎn)杠就能找到需要到的 amage 點(diǎn) jbg 的文件了，保存一下看看效果。這里可以看到圖片還是正常顯示出來(lái)了。

本期視頻主要了解了相對(duì)路徑的三種分類(lèi)，一個(gè)是同級(jí)路徑，一個(gè)是下級(jí)路徑，還有一個(gè)是上級(jí)路徑。希望小伙伴們下來(lái)可以好好練習(xí)一下，這對(duì)于后期的內(nèi)容非常重要。下期再來(lái)聊聊絕對(duì)路徑。本期的內(nèi)容到此結(jié)束，感謝觀看，下期再見(jiàn)。

OM to Image

dom-to-image是一個(gè)js庫(kù)，可以將任意dom節(jié)點(diǎn)轉(zhuǎn)換為矢量(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');

用法

所有高階函數(shù)都接受DOM節(jié)點(diǎn)和渲染選項(xiàng)options ，并返回promises。

1. 獲取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);
    });

2. 獲取圖像blob：

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

3. 獲取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();
});

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

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

5. 以u(píng)int8數(shù)組的形式獲取原始像素?cái)?shù)據(jù)，每4個(gè)數(shù)組元素表示一個(gè)像素的RGBA數(shù)據(jù)：

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參數(shù)

原理

dom-to-image使用SVG的一個(gè)特性，它允許在標(biāo)記中包含任意HTML內(nèi)容。

• 遞歸地克隆原始DOM節(jié)點(diǎn)
• 計(jì)算節(jié)點(diǎn)和每個(gè)子節(jié)點(diǎn)的樣式，并將其復(fù)制到相應(yīng)的克隆 創(chuàng)建偽元素，因?yàn)樗鼈儾皇且匀魏畏绞娇寺〉?/li>
• 嵌入web字體 查找所有@font face聲明的web字體 解析文件URL，下載相應(yīng)文件 base64編碼的內(nèi)聯(lián)作為data：URLs 將所有已處理的CSS放入中，然后將其附加到克隆
• 嵌入圖片 在嵌入圖片URL 使用backgroundCSS屬性的圖片，方法類(lèi)似于字體
• 將克隆的節(jié)點(diǎn)序列化為XML
• 將XML包裝到標(biāo)記中，然后包裝到SVG中，然后使其成為data URL
• 或者，要以Uint8Array的形式獲取PNG內(nèi)容或原始像素?cái)?shù)據(jù)，可以創(chuàng)建一個(gè)以SVG為源的圖像元素，并將其呈現(xiàn)在已經(jīng)創(chuàng)建的canvas上，從canvas讀取內(nèi)容

部分源碼分析

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設(shè)置默認(rèn)options選項(xiàng)
• domtoimage的核心api:
• toSvg
• toPng
• toJpeg
• toBlob
• toPixelData
• 例：toJpeg：將draw函數(shù)返回的canvas實(shí)例，使用canvas的toDataURL方法生成jpeg圖片。toSvg函數(shù)將遞歸地克隆原始DOM節(jié)點(diǎn), 將克隆的節(jié)點(diǎn)序列化為XML,將XML包裝到標(biāo)記中，然后包裝到SVG中，然后使其轉(zhuǎn)成dataURL。

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

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