條APP上有個截圖分享功能，就是把文章轉成一張圖片，然后分享到各渠道中去，如微信、QQ等，非常實用，因此，打算就這項功能自己封裝為一個組件ImageGenerator，后期專門進行圖片生成，html是其中的一個源。

目前前端使用較多的html轉圖片的工具是Html2Canvas，考慮技術儲備和問題討論的充裕性，決定封裝一下這個工具。步驟如下：

安裝HTML2Canvas

按照官方要求，做安裝操作：

npm

npm install html2canvas

我當時下載的是1.4.1的版本。

這個工具有自身的一些限制，使用時要注意：

[1] 并非真正的截圖軟件，而是根據DOM繪制出來的，其繪制能力，完全依賴于工具對DOM和對應屬性的支持和理解;

[2] 因為使用了Canvas支持，生成圖片的區域不能再有Canvas應用，否則會干擾工具的生成，不能保證生成預期，因此，如果使用了Canvas圖表的應用這個工具不推薦使用

封裝ImageGenerator

這個很簡單，這里就是封裝一個組件，用于后期引入html之外的源生成圖片，同時也做一下圖片的統一顯示，從而和系統整體的設計進行配合。大致的實現思路如下：

上圖，我們引入了工具本身，并設置的結果的顯示區。生成的結果將以節點的方式注入 #image-box 中。

上圖，封裝了一個方法，用途是利用Html2Canvas工具獲得圖片，這里我們引入了一個組件的數據imageData用以存儲和干預生成結果。在這里，我把ImageGenerator封裝為全局組件。

應用場景

我們在文章的尾部加入一個share功能，點擊彈出分享設置的彈窗，實際效果如下圖所示：

以上技術實現比較簡單，這里就不進行贅述了。上圖中，我們設置了一個生成圖像按鈕，點擊該按鈕則可以觸發我們組件中的對應操作。關鍵思路包括：

【1】這里設置了一個封裝組件shareHandler，封裝了前導模塊和imageGenerator，這兩個模塊的顯示通過一個開關進行控制，該開關則通過圖像生成成功事件進行賦值，這樣的話，我們可以實現圖片生成后，不再顯示前導模塊，而是顯示圖片結果，即ImageGenerator。

【2】這里有一個比較關鍵的操作是shareHandler通過觸發事件將轉換器發射到文章轉換現場，為什么用事件，還是那句話，事件對于解耦和消除組件依賴是最自然的實現。注意，這里我把imageGenerator通過引用的方式作為參數傳出了，這樣的好處是事件將轉換器代入了轉換現場，并可以攜帶回現場轉換結果。

【3】在文章查看器，solutionViewer中，自然會訂閱事件、事件處理和取消訂閱。注意這里的事件處理，實際上是調用了轉換器中我們封裝的函數，參數則是現場取得的，這里的機制很簡單，定義要轉換div的id，作為參數傳入函數。

那么，點擊圖像后，我們可以看到效果圖：

點擊右鍵另存圖像，我們可以獲得一張png格式的圖片，至于后續對下載和到粘貼板的支持，大家可以自行研究和實現。

注意事項

實現過程中有幾個注意事項：

【1】Canvas返回時，其長寬都是按照實際大小生成的，而我們的例子中，則要根據右抽屜式的彈窗做width=100%，height=auto的處理，這個要如何實現，就是要通過我們在imageGenerator中引入的imageData。

【2】我們的文章顯示中，引入了文件管理的微服務，因此，文章中圖片的鏈接都是跨域的，所以，必須打開html2Canvas的跨域選項，在封裝的組件里，我是通過一共一個defaultOptions來實現這一點的。

這個選項可以在轉換場景提供，也可提供一系列的默認值，最常用的除跨域外，還有是否允許log輸出等開關，大家感興趣可以自行查閱html2Canvas的官網。

內容比較簡單，大家如果有這個應用場景，可以參考實現一下，有問題歡迎大家隨時交流。謝謝大家的支持。

字中夾著圖片，圖片也需要文字說明，文字和圖片相輔相成，就有了絢麗多彩的網頁內容。但是圖文混排的方式卻給我們存儲數據帶來不便，實際上大多數網頁是把文字和圖片分別存放在不同文件中的，在html源碼中只保存圖片的鏈接地址。

如上圖所示，在做數據采集時，很多朋友把文字和圖片分別下載保存，還要處理鏈接本地化轉換的問題。實際上我們也可以把圖片文件轉碼后保存在html源碼文件里，這樣用一個html文件就可以保存圖文信息了，自動采集圖文步驟如下。
打開木頭瀏覽器項目管理窗口，創建【打開網頁】步驟，添加需要采集的頁面網址，如果添加多個網址，則可以按順序打開采集內容。

然后添加最關鍵的步驟【抓取內容】，【添加】抓取內容，在彈出的【抓取元素設置】窗口，點擊【自動獲取】按鈕，瀏覽器將處于元素定位模式，鼠標移到需要抓取的元素內容上方點擊右鍵，在彈出的快捷菜單中選擇【獲取元素并返回】，成功獲取可唯一標識該元素的方法，如下圖所示，此以頁面使用元素的ID屬性定位等抓取的元素區域，設置獲取元素的【TagTextToHtml】擴展屬性，意思是把元素內容轉化為Html代碼。如有必要，可以使用同樣的方法繼續添加抓取頁面文章標題，此處不再贅述。

抓取元素轉換成html后，就是保存數據了，創建【保存數據】步驟，勾選【保存變量文件】，選擇Htm文件格式，設置文件保存路徑。

最后，點擊【開始測試】按鈕運行項目，當項目執行完畢后，打開設定的保存文件目錄，就可以看到自動保存和htm文件，且只有這個文件，雙擊自動調用瀏覽器打開，完整呈現圖文內容。圖片已經轉成了Base64編碼，嵌入保存在htm文件中。