新智元導讀】在這個數據「泛濫」的時代，你的隱私數據到底被多少機構「花式」使用了？國外的研究人員開發一款名叫Exposing.AI的工具，可以幫人們獲知自己的人臉數據被各種面部識別系統使用的情況，并經常能獲得令人出乎意料的結果。

當科技公司開發出「蠶食個人隱私」的面部識別系統的時候，他們大概率已經得到了您意想不到的幫助：你的臉——

公司、大學和政府實驗室使用了數百萬張從五花八門的網上資源中收集來的圖像，來開發這項技術。

而現在，國外的研究人員開發了一項技術：「Exposing.AI 」, 這項技術可以幫助人們在這些圖像中搜索他們的舊照片。

這款工具可以匹配Flickr在線照片共享服務中的圖像，為查找各種AI技術（從面部識別到聊天機器人）所使用的大量數據提供了窗口。

「人們需要知道，他們最私密的照片很可能被利用了」，隱私和民權組織監視技術監督項目的技術總監利茲·奧沙利文(Liz O’sullivan)如是說。

她與在柏林的研究員、藝術家亞當·哈維（Adam Harvey）一起合作，也參與了Exposing.AI項目，

蜜月照被國家級監控系統所用，這位導演感到了「害怕」

人工智能系統不會魔法般的變得聰明——它們是通過精確定位人類生成的數據模式來自我學習的。技術是一直在進步和發展的，然而，它們卻學到了人類對女性和少數族裔的偏見。

大家可能并不知道，自己其實一直在默默為AI的發展做著貢獻。

對于一些人來說，這是一件很令人感到新奇的事，而對于另外一些人，就非常令人毛骨悚然了。

關鍵是，在國外，這可能是違法的——

2008年，伊利諾斯州通過了一項名為《生物特征信息隱私法》(Biometric Information Privacy Act)的法律，條文中要求，如果在未經居民同意的情況下使用他們的面部掃描，將會受到經濟處罰。

2006年，來自不列顛哥倫比亞省維多利亞州的紀錄片導演布雷特?蓋勒(Brett Gaylor)將他的蜜月照片上傳到當時很受歡迎的Flickr網站上：

經過15年后，使用哈維提供的早期版本的Exposing.AI，他發現，數百張他的蜜月旅行的照片，已經進入到了多個數據集——這些數據集很可能被用于訓練世界各地的面部識別系統。

多年來，Flickr被許多公司買賣，現在屬于照片共享服務公司SmugMug，該公司允許用戶在知識共享許可(Creative Commons license)下分享他們的照片。

這種許可在互聯網網站上很常見，意味著其他人可以在一定的限制下使用這些照片（盡管這些限制可能被忽略了）。

2014年，當時擁有Flickr的雅虎(Yahoo)在一個數據集中，為了幫助計算機視覺方面的工作，使用了許多這樣的照片。

蓋勒好奇，自己的照片究竟是如何被到處傳來傳去的。接著，他就被告知，這些照片可能被美國和其他國家的監控系統所使用。

「我的好奇變成了恐懼」，他說。

是的，一個美國人的蜜月照片，竟然被用來建立國家級別的監視系統，實在是令人意外。

非商業用途MegaFace被各種公司普遍使用，下線也無法解決問題

幾年前，頂尖大學和科技公司的人工智能研究人員，開始從各種渠道收集照片，這些渠道包括照片分享服務、社交網絡、OkCupid等約會網站，甚至還包含安裝在大學里的相機。收集之后，他們向其他組織分享了這些照片。

這對于研究人員來說，是正?，F象。他們都需要把數據輸入新的人工智能系統，所以他們就分享了所有的數據，但這是合法的。

MegaFace數據集就是一個例子——這是華盛頓大學的教授們在2015年創建的一個數據集。

他們在數據源沒有知情且同意的情況下，就把他們的照片放進了龐大的照片庫中。

這些教授將圖片發布到互聯網上，以便其他人可以下載。

根據《紐約時報》的公開記錄請求，世界各地的公司和政府機構已經下載了超過6000次MegaFace。其中包括美國國防承包商諾斯羅普·格魯曼公司、中央情報局的投資部門In-Q-Tel，當然還有中國的社交媒體及公司等。

研究人員創建MegaFace的起初目的，是為了將其用于一項旨在促進面部識別系統發展的學術競賽，并不是為商業用途準備的。

然而事實是，但只有一小部分公開下載了MegaFace的用戶參加了這場比賽。

「我們不適合討論第三方項目」，華盛頓大學發言人維克托·巴爾塔(Victor Balta)說，「MegaFace已經“退役”，我們也不再分發MegaFace的數據了」

今年5月，華盛頓大學(University of Washington)將MegaFace下線。然而。這些數據的副本可能出現在任何地方，并繼續為新的研究提供素材。

限制之下，隱私數據濫用問題何時可解？

奧沙利文和哈維花了數年時間，試圖開發一個可以揭露所有這些數據使用情況的工具，實際的過程比他們預料的要困難。

他們想要使用某人的照片，來立即告訴那個人ta的臉被包含在各種數據集的次數。

但他們擔心，這種工具可能會被其他組織用在不好的地方。

「潛在的危害似乎很大」，奧沙利文說。

值得一提的是，奧沙利文還是幫助企業管理AI技術使用的紐約公司Responsible.AI的副總裁。

最后，他們被迫限制了人們搜索該工具的方式以及搜索提供的結果。結果是，這個工具并不像他們希望的那樣有效。

Exposing.AI本身并不使用面部識別技術。只有當你提供了可以在線指向該照片的方式——比如一個互聯網地址，它才能實現照片的精確定位。

此外，人們只能搜索發布在Flickr上的照片：他們需要Flickr的用戶名、標簽或網絡地址來識別這些照片。

研究人員表示，這一舉措是為了加強安全和隱私保護能力。

雖然限制了該工具的用途，但它的效果仍然讓人大開眼界：

Flickr上的圖片構成了大量的面部識別數據集，這些數據集已經在互聯網上廣泛流傳，其中就包括MegaFace。

使用Exposing.AI 找到與自己有聯系的照片并不難：只需要在舊郵件中搜索Flickr鏈接，就能找到被用于MegaFace和其他面部識別數據集的照片。

通過這個工具，蓋勒對他所發現的情況感到特別不安，因為他曾經認為?；ヂ摼W上的信息自由流動是一件積極的事情，而他使用Flickr，是因為其他人使用他照片的權利是受到知識共享許可限制的。

「我現在正經歷著這些后果」，他說。

他的希望——也是奧沙利文女士和哈維先生的希望——是公司和政府會制定新的規范、政策和法律，來防止個人數據被大量收集。

此外，蓋勒正在制作一部記載他的蜜月照片漫長、曲折、令人不安的「流傳歷程」的紀錄片，來揭示這個私人數據被濫用的問題。

參考鏈接：

https://www.nytimes.com/2021/01/31/technology/facial-recognition-photo-tool.html?referringSource=articleShare

問題復現

之前在做 html 內容導出為 pdf、圖片時，先是用 html2canvas 生成截屏，再進一步轉換為 pdf 文件，感興趣的同學可以看下這篇一文搞定前端 html 內容轉圖片、pdf 和 word 等文件，截圖得到的圖片內容、質量都沒有什么問題。

不過最近有個同事反應，他導出的圖片有 bug，這我倒挺好奇的，因為這個導出功能已經用了很久，并沒有人反饋過有問題（除了那個 pdf 翻頁內容被截斷的問題，求助 jym ：前端有好的解決方法嗎？），于是我要了他的文檔，果不其然，出現了下面紅框所示的問題。

檢查一下它的 DOM 結構，發現是下面這樣，猜測是就是這個原因導致的。

為了驗證自己的猜想，淺淺調試一下 html2canvas 的源碼，看下 html2canvas 是怎樣一個流程，它是如何將 html內轉成 canvas 的。

調試開始

在 html2canvas 執行的地方打個斷點，開始調試代碼：

進入 html2canvas 內部，可以看到內部執行的是 renderElement 方法：

咱們直接進入到 renderElement 方法內部，看下它的執行流程：

renderElement 執行流程

判斷傳入節點是否有效

• Node.ownerDocument：只讀屬性，返回當前節點的頂層的 document 對象；
• document.defaultView：屬性返回當前 document 對象所關聯的 window 對象，如果沒有，會返回 null。

這里主要判斷節點，快速跳過，繼續執行 。

合并配置項

將用戶傳入的 options 與默認的 options 合并

構建配置項，將傳入的 opts 與默認配置合并，同時初始化一個 context 上下文對象（緩存、日志等）：

緩存對象 cache

其中 cache 為緩存對象，主要是避免資源重復加載的問題。

原理如下：

如果遇到圖片鏈接為 blob，在加載完成后，會添加到緩存 _cache 中：

下次使用直接通過 this._cache[src] 從緩存中獲取，不用再發送請求：

同時，cache 中控制圖片的加載和處理，包括使用 proxy 代理和使用 cors 跨域資源共享這兩種情況資源的處理。

繼續往下執行

克隆原始 DOM

使用 DocumentCloner 方法克隆原始 DOM，避免修改原始 DOM。

使用 clonedReferenceElement 將原始 DOM 進行克隆，并調用 toIFrame 將克隆到的 DOM 繪制到 iframe 中進行渲染，此時在 DOM 樹中會出現 class 為 html2canvas-container 的 iframe 節點，通過 window.getComputedStyle 就可以拿到要克隆的目標節點上所有的樣式了。

繪制 canvas

前面幾步很簡單，主要是對傳入的 DOM 元素進行解析，獲取目標節點的樣式和內容。重點是 toCanvas 即將 DOM 渲染為 canvas 的過程，html2canvas 提供了兩種繪制 canvas 的方式：

1. 使用 foreignObject 方式繪制 canvas
2. 使用純 canvas 方法繪制

咱們接著執行，當代碼執行到這里時判斷是否使用 foreignObject 的方式生成 canvas：

使用 foreignObject方式繪制 canvas

首先了解下 foreignObject 是什么？

1. svg 中的xmlns 全稱是“XML Namespaces”，即 XML 命名空間，正是它的存在，在瀏覽器中 svg 才能正常渲染（下面這段代碼是在 iconfont 上隨便復制的一個 icon svg 代碼）；
2. xml復制代碼 <svg t="1692613183565" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20058" width="200" height="200">
   <path d="M548.571429 292.571429v182.784L731.428571 475.428571v73.142858l-182.857142-0.073143V731.428571h-73.142858V548.498286L292.571429 548.571429v-73.142858l182.857142-0.073142V292.571429h73.142858z" fill="#626B7D" p-id="20059"></path>
   </svg>
3. foreignObject 允許包含來自不同的 XML 命名空間的元素，借助 <foreignObject> 標簽，我們可以直接將 DOM 節點作為 foreignObject 插入 SVG 節點中進行渲染，如下：
4. xml復制代碼<svg xmlns="http://www.w3.org/2000/svg">
   <foreignObject width="120" height="50">
   <body xmlns="http://www.w3.org/1999/xhtml">
   <div>測試測試</div>
   </body>
   </foreignObject>
   </svg>
5. 可以看到 <foreignObject> 標簽里面有一個設置了 xmlns="http://www.w3.org/1999/xhtml" 命名空間的 <body> 標簽，此時 <body> 標簽及其子標簽都會按照 XHTML 標準渲染，實現了 SVG 和 XHTML 的混合使用。
6. 這樣只需要指定對應的命名空間，就可以把它嵌套到 foreignObject 中，然后結合 SVG，直接渲染。
7. 對于不同的命名空間，瀏覽器解析的方式也不一樣，所以在 SVG 中嵌套 HTML，解析 SVG 的時候遇到 http://www.w3.org/2000/svg 轉化 SVG 的解析方式，當遇到了 http://www.w3.org/1999/xhtml 就使用 HTML 的解析方式。
8. 這是為什么 SVG 中可以嵌套 HTML，并且瀏覽器能夠正常渲染。
9. foreignObject 已經支持除 IE 外的主流瀏覽器
10. 
    

弄懂 foreignObject 后，我們嘗試將 foreignObjectRendering 設置為 true，看看它是如何生成 canvas 的：

js復制代碼Html2canvas(warp, {
  useCORS: true,
  foreignObjectRendering: true,
})

在此處打個斷點：

進入 ForeignObjectRenderer 類中

這里通過 ForeignObjectRenderer 實例化一個 renderer 渲染器實例，在 ForeignObjectRenderer 構造方法中初始化 this.canvas 對象及其上下文 this.ctx

調用 render 生成 canvas，進入到 render 方法：

render 方法執行很簡單，首先通過 createForeignObjectSVG 將 DOM 內容包裝到<foreignObject>中生成 svg:

生成的 svg 如下所示：

接著通過。loadSerializedSVG 將上面的 SVG 序列化成 img 的 src（SVG 直接內聯），調用this.ctx.drawImage(img, ...); 將圖片繪制到 this.canvas 上，返回生成好的 canvas 即可。

接著點擊下一步，直到回到最開始的斷點處，將生成好的 canvas 掛在到 DOM 上，如下：

js
復制代碼document.body.appendChild(canvas)

這就解決了？？？收工！！！

NoNoNo，為什么使用純 canvas 繪制就有問題呢？ 作為 bug 終結者，問題必須找出來，干就完了 。

而且使用 foreignObject 渲染還有其他問題，我們后面再說。

foreignObject 繪制 canvas 的流程

1. 首先克隆原始 DOM，并將所有樣式都轉為行內樣式，避免修改到頁面；
2. 構建 ForeignObjectRenderer 渲染器實例，調用 renderer 方法；
3. 將 DOM 內容通過 createForeignObjectSVG 轉為 svg 元素；
4. 通過 loadSerializedSVG 將上面的 svg 序列化成 img 的 src；
5. 通過 drawImage 繪制圖片到 canvas 上。

使用純 canvas 繪制

要想使用純 canvas 方式繪制，那么就需要將 DOM 樹轉換為 canvas 可以識別的數據類型，html2canvas 使用 parseTree 方法來實現轉換，我們來看下它的執行過程。

直接在調用 parseTree 方法處打斷點，進入到 parseTree 方法內：

parseTree 的作用是將克隆 DOM 轉換為 ElementContainer 樹。

首先將根節點轉換為 ElementContainer 對象，接著再調用 parseNodeTree 遍歷根節點下的每一個節點，轉換為 ElementContainer 對象。

ElementContainer 對象主要包含 DOM 元素的信息：

ts復制代碼type TextContainer={
  // 文本內容
  text: string;
  // 位置和大小信息
  textBounds: TextBounds[];
}

export class ElementContainer {
  // 樣式數據
  readonly styles: CSSParsedDeclaration;
  // 當前節點下的文本節點
  readonly textNodes: TextContainer[]=[];
  //  除文本節點外的子元素
  readonly elements: ElementContainer[]=[];
  // 位置大小信息（寬/高、橫/縱坐標）
  bounds: Bounds;
  // 標志位，用來決定如何渲染的標志
  flags=0;
  ...
}

ElementContainer 對象是一顆樹狀結構，層層遞歸，每個節點都包含以上字段，形成一顆 ElementContainer 樹，如下：

繼續下一步

通過 CanvasRenderer 創建一個渲染器 renderer，創建 this.canvas和this.ctx上下文對象與 ForeignObjectRenderer 類似

得到渲染器后，調用 render 方法將 parseTree 生成的 ElementContainer 樹渲染成 canvas，在這里就與 ForeignObjectRenderer 的 render 方法產生差別了。

層疊上下文

概念不懂就看 MDN：層疊上下文

首先我們都知道 CSS 是流式布局，也就是在沒有浮動（float）和定位（position）的影響下，是不會發生重疊的，從上到下、由外到內按照 DOM 樹去布局。

而浮動和定位的元素會脫離文檔流，形成一個層疊上下文，所以如果想正常渲染，就需要得到它們的層疊信息。

可以想象一下：在我們的視線與網頁之間有一條看不見的 z 軸，層疊上下文就是一塊塊薄層，而這些薄層中有很多 DOM 元素，這些薄層根據層疊信息在這個 z 軸上排列，最終形成了我們看到的絢麗多彩的頁面。

畫個圖好像更形象些：

白色為正常元素，黃色為 float 元素，藍色為 position 元素

更多詳細資料請閱讀：深入理解 CSS 中的層疊上下文和層疊順序

canvas 在繪制節點時需要先計算出整個目標節點里子節點渲染時所展現的不同層級，因為 Canvas 繪圖需要根據樣式計算哪些元素應該繪制在上層，哪些在下層。元素在瀏覽器中渲染時，根據 W3C 的標準，所有的節點層級布局，需要遵循層疊上下文和層疊順序的標準。

調用 parseStackingContexts 方法將 parseTree 生成的 ElementContainer 樹轉為層疊上下文。

ElementContainer 樹中的每一個 ElementContainer 節點都會產生一個 ElementPaint 對象，最終生成層疊上下文的 StackingContext 如下：

數據結構如下：

ts復制代碼// ElementPaint 數據結構如下
ElementPaint: {
  // 當前元素的container
  container: ElementContainer
  // 當前元素的border信息
  curves: BoundCurves
}

// StackingContext 數據結構如下
{
  element: ElementPaint;
  // z-index為負的元素行測會給你的層疊上下文
  negativeZIndex: StackingContext[];
  // z-index為零或auto、transform或者opacity元素形成的層疊上下文
  zeroOrAutoZIndexOrTransformedOrOpacity: StackingContext[];
  // 定位或z-index大于等于1的元素形成的層疊上下文
  positiveZIndex: StackingContext[];
  // 非定位的浮動元素形成的層疊上下文
  nonPositionedFloats: StackingContext[];
  // 內聯的非定位元素形成的層疊上下文
  nonPositionedInlineLevel: StackingContext[];
  // 內聯元素
  inlineLevel: ElementPaint[];
  // 非內聯元素
  nonInlineLevel: ElementPaint[];
}

渲染層疊內容時會根據 StackingContext 來決定渲染的順序。

繼續下一步，調用 renderStack 方法，renderStack 執行 renderStackContent 方法，咱們直接進入 renderStackContent 內：

canvas 繪制時遵循 w3c 規定的渲染規則 painting-order，renderStackContent 方法就是對此規則的一個代碼實現，步驟如下：

此處的步驟 1-7 對應上圖代碼中的 1-7:

1. 渲染當前層疊上下文的元素的背景和邊框；
2. 渲染具有負 z-index 級別的子層疊上下文（最負的第一個）；
3. 對于流式布局、非定位的子元素調用 renderNodeContent 和 renderNode 進行渲染：
4. 渲染所有未定位的浮動子元素，對于其中每一個，將該元素視為創建了一個新的堆棧上下文；
5. 渲染正常流式布局、內聯元素、非定位的子元素；
6. 渲染 z-index 為 0 或 auto，或者 transform、opacity 等屬性的子元素；
7. 渲染由 z-index 大于或等于 1 的子元素形成的層疊上下文，按 z-index 順序（最小的在前）。

可以看到遍歷時會對形成層疊上下文的子元素遞歸調用 renderStack，最終達到對整個層疊上下文樹進行遞歸的目的：

而對于未形成層疊上下文的子元素，就直接調用 renderNode 或 renderNodeContent 這兩個方法，兩者對比，renderNode 多了一層渲染節點的背景色和邊框的方法（renderNode 函數內部調用 renderNodeBackgroundAndBorders 和 renderNodeContent 方法）。

renderNodeContent 用于渲染一個元素節點里面的內容，分為八種類型：純文本、圖片、canvas、svg、iframe、checkbox 和 radio、input、li 和 ol。

除了 iframe 的繪制比較特殊：重新生成渲染器實例，調用 render 方法重新繪制，其他的繪制都是調用 canvas 的一些 API 來實現，比如繪制文字主要用 fillText 方法、繪制圖片、canvas、svg 都是調用 drawImage 方法進行繪制。

所有可能用到的 API

最終繪制到 this.canvas 上返回，至此，html2canvas 的調試就結束了。

純 canvas 繪制流程

1. 首先克隆原始 DOM，避免修改到頁面；
2. 使用 parseTree 遞歸遍歷 html，生成 ElementContainer 樹（與原始 DOM 層級結構類似）；
3. 構建 CanvasRenderer 渲染器實例，調用 renderer 方法；
4. 遍歷上一步生成的 ElementContainer，根據層疊規則生成層疊上下文StackingContext（與原始 DOM 層級結構區別較大）；
5. 遍歷層疊上下文，遞歸地對層疊上下文各層中的節點和子層疊上下文進行解析并按順序繪制在 Canvas 上，針對要繪制的每個節點，主要有以下兩個過程：
6. 創建畫布，根據上一步生成的層疊對象遞歸渲染，最終將 html 內容繪制到畫布 canvas 上。

針對最初的 Bug 分析

ok，當調試了一遍 html2canvas 的流程之后，再回到我們的問題上，很顯然就是 canvas 渲染的時候的問題，也就是 renderNodeContent 方法，那我們直接在這里打個斷點進行調試（為了方便我只輸入一行文字進行調試），只有當是文本節點時會進入到此斷點，等到 mark 標簽中對應的元素進入斷點時，查看：

可以看到此時 width 和 height 已經是父節點的寬高，果真如此 。

解決方案

既然已經知道了問題所在，那么我們開始解決問題，有以下兩種解決方案可供參考：

foreignObjectRendering

在 html2canvas 配置中設置 foreignObjectRendering 為 true，此問題就可以解決嗎？

然而現實并沒有這么簡單，這樣又會引出新的問題：導出的圖片內容丟失

這是為什么呢？

通過 W3C 對SVG 的介紹可知：SVG 不允許連接外部的資源，比如 HTML 中圖片鏈接、CSS link 方式的資源鏈接等，在 SVG 中都會有限制。

解決方法：需要將圖片資源轉為 base64，然后再去生成截圖，foreighnObject 這種方法更適合截取內容為文字內容居多的場景。

對包含背景色的內聯標簽截斷處理

在對內聯元素進行截斷前，如何確定 p 標簽中的 mark 標簽有沒有換行？ 因為我們沒必要對所有內聯標簽做處理。

如果 mark 標簽的高度超過 p 標簽的一半時，就說明已經換行了，然后將 <mark>要求一</mark> 替換為 <mark>要</mark><mark>求</mark><mark>一</mark> 即可，代碼如下：

ts復制代碼const handleMarkTag=(ele: HTMLElement)=> {
  const markElements=ele.querySelectorAll('mark')
  for (let sel of markElements) {
    const { height }=sel.getBoundingClientRect()
    let parentElement=sel.parentElement
    while (parentElement?.tagName !=='P') {
      parentElement=parentElement?.parentElement!
    }
    const { height: parentHeight }=(
      parentElement as unknown as HTMLElement
    ).getBoundingClientRect()
    // mark的高度沒有超過p標簽的一半時 則沒有換行
    if (height < parentHeight / 2) continue
    // 超過一半時說明換行了
    const innerText=sel.innerText
    const outHtml=sel.outerHTML
    let newHtml=''
    innerText.split('')?.forEach((text)=> {
      newHtml +=outHtml.replace(innerText, text)
    })
    sel.outerHTML=newHtml
  }
}

ok，再次嘗試一下，完美解決，這下可以收工了。

總結

通過對一個不是 bug 的 bug 的分析，嘗試調試了一遍 html2canvas 的代碼，弄懂了瀏覽器截圖的原理及 html2canvas 的核心流程，并從中學到了幾點新知識：

1. svg xmnls 作用以及渲染 HTML 內容的 foreignObject 標簽；
2. 使用 foreignObject 實現快速截圖的方法；
3. CSS 層疊上下文的概念；
4. canvas 繪圖的一些方法。。。

發現 canvas 真是一個有趣的東西，什么都能畫，像我現在用于畫圖的工具excalidraw、圖表庫g6、g2、echarts都是用的 canvas 搞的，看來得抽時間學習一下 canvas，不要等到“書到用時方恨少“。

以上就是本文的全部內容，希望這篇文章對你有所幫助，歡迎點贊和收藏 ，如果發現有什么錯誤或者更好的解決方案及建議，歡迎隨時聯系。

作者：翔子丶 鏈接：https://juejin.cn/post/7277045020423798840 來源：稀土掘金 著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。