網頁上生成一個便于用戶分享的精美海報，或者對于網頁內容生成截圖，現在已經是一個非常常見的需求，現在怎么實現呢？

生成海報很麻煩

生成網頁截圖和海報一般都有兩種做法，一是服務端使用 GD 庫生成，二是前端使用 Canvas 生成，但是這兩種方法都比較麻煩。

服務端通過 GD 庫去生成的話，首先要去查 GD 庫相關的大量函數，然后圖片的坐標，文字的換行等等都要仔細去算，一點點修改，都要重新算一遍，非常難受。

而前端使用 Canvas 生成的話，就需要熟悉 Canvas 的語法，它的 API 比較復雜，有大量的方法和屬性，讓很多希望通過 Canvas 畫圖的同學望而卻步。

那么有沒有什么簡單的方法生成海報呢？不需要學習太多新知識，利用現有的知識就實現的呢？

html2canvas

有的，html2canvas 就是這樣的一個 Javascript 庫，無需大量學習，只需要會 HTML 和 CSS 即可，html2canvas 可以把網頁元素或者整個網頁轉換為一個 Canvas 對象或者圖片。

html2canvas 是通過在瀏覽器端解析 HTML 和 CSS 來實現這個功能，不需要任何服務器端的支持，然后也不需要對 Canvas 相關的方法深入的學習，只需要懂簡單的 HTML 和 CSS 即可。

總結一下，下面是 html2canvas 的一些主要優勢：

1. 無需后端支持：html2canvas 完全在客戶端運行，無需任何服務器端的支持。這使得它非常適合在各種環境中使用，包括靜態網頁和單頁應用。
2. 靈活且強大：你可以指定截圖的元素，包括整個網頁或者特定的 DOM 元素。此外，html2canvas 還支持多種 CSS 屬性，包括 z-index、overflow、CSS transforms 和 CSS filters 等。
3. 跨瀏覽器兼容性：html2canvas 支持所有主流的瀏覽器，包括 Chrome、Firefox、Safari 和 IE11+。
4. 豐富的功能：html2canvas 提供了一系列的選項和API，使得你可以對截圖過程進行深度定制，包括修改截圖的尺寸、忽略特定元素、添加背景顏色等。
5. 源碼開放：html2canvas 是開源的，你可以查看和修改它的源代碼，甚至為它貢獻代碼。

但是也需要注意的是，由于 html2canvas 是通過解析 HTML 和 CSS 來生成截圖的，所以它無法完美地復制所有的渲染效果，特別是一些復雜的 CSS 樣式和動態內容。

幾行代碼

首先加載 html2canvas 對應的 JavaScript 庫：

<script type='text/javascript' src='https://cdn.staticfile.org/html2canvas/1.4.1/html2canvas.js'></script>

然后選擇對應的網頁元素生成屏幕截圖：

html2canvas(document.querySelector("#capture")).then(canvas=> {
    document.body.appendChild(canvas)
});

就是這么簡單，幾行代碼就實現。

何把網頁上的內容用javascript來實現截圖？今天分享的html2canvas就可以。

介紹

在微信項目中經常會遇到動態生成海報的需求，Web前端合成圖片往往會使用canvas。canvas雖然強大，但用來合成海報非常繁瑣，一不小心就幾百行代碼了。而html2canvas.js是一款輕松地將HTML+CSS寫成的布局直接轉換成canvas，生成可保存分享的圖片。

特點

• 兼容現代瀏覽器，手機項目可放心大膽使用；
• 官網文檔清晰簡單，用法簡單支持npm/yarn和cdn引入，有充足的代碼例子；
• 支持部分常用的CSS屬性，配合圖片使用幾乎能滿足所有動態生成海報的需求。

使用體驗

這是一個把HTML的DOM結構根據所支持的CSS樣式生成canvas的js開源庫，CSS的寫法千變萬化，不同的布局有很多不同的寫法，因此html2canvas是不能100%還原網頁的樣式，因此不用用于像電腦屏幕截圖這樣的需求中。

使用的時候要注意查看所支持的CSS屬性，盡量使用這些屬性來寫布局，不支持的效果可以嘗試用圖片來實現。只要產品經理腦子在線，目測幾乎沒有什么海報需求是實現不了的。

官網是英文的，寫得很專業，谷歌翻譯閱讀無壓力。

免費使用說明

html2canvas 由開發者 Niklas von Hertzen 創建，基于MIT許可開源，可以免費使用在任何項目。

關注我，持續分享高質量的免費開源、免費商用的資源。

↓↓點【了解更多】查看本次分享的相關網址。

雯 發自 凹非寺
量子位 報道 | 公眾號 QbitAI

上個月，萬維網源代碼在網上公開拍賣：

沒錯，就是1990年的那9555行構成現代互聯網基礎的源代碼，由互聯網之父Tim Berners-Lee本人提供！

而這份NFT（非同質化代幣）形式的拍賣品起價只有1000美元，一經放出價格一路飆升。

最終的成交價高達540萬美元（折合人民幣3400萬）：

但在此之前，有人卻從公開的代碼演示視頻中發現了bug：

明明有bug，卻還能賣到如此高價？

在了解原因之前，先來看看這份拍賣品里都有什么。

“出售互聯網”

拍賣品的核心是包含了HTML、HTTP和URI的最初實現，并帶有時間戳的源代碼文件。

除此之外，還有一段30分鐘的編碼演示視頻，一封由互聯網之父寫的闡述代碼創建過程的信，以及一張SVG格式的“代碼海報”（右下角還有Tim的矢量簽名）：

1990年12月25日，Tim Berners和另一位法國研究者第一次基于Web原理的HTTP代理實現了與服務器的通訊。

隨后，這項技術就被迅速推廣到了全世界。

但Tim并未在當時申請萬維網的知識產權，他分文未取。

而在30年后，這位66歲的互聯網之父將源代碼鑄成NFT再次拿了出來。

他表示：

無論是藝術品還是像這樣的數字藝術品，NFT都是這個領域最新的改變游戲規則的創作，也是現有的最合適的所有權形式。

就像上面的代碼、視頻、圖像……我們都可以將其總歸為數字產品。

而NFT，就是對非物質世界的資產進行所有權證明，并衡量它們市場價值的一種虛擬代幣。

網友一邊感慨互聯網之父終于收到了“遲到30年的專利費”，一邊震驚于這份NFT形式的拍賣品價格上漲之快。

但這時，突然有人站出來表示：你這源代碼好像有點不對啊……

這位研究人員從那30分鐘的編碼演示視頻里發現，代碼中的角括號<和>被<和>替代了。

而評論區也有人貼出來實際代碼中的其他類似錯誤：

不過SVG格式的代碼海報倒是沒什么問題：

而對于這一錯誤，不管是拍賣行還是Tim本人都沒有做任何回應。

第二天，拍賣行就宣布這份NFT形式的數字藝術品被以高價成功拍下。

包含了bug的拍賣品

大家發現，在后來的公開演示視頻里，那段錯誤的代碼已經得到了糾正：

但是這里就出現了一個問題。

NFT和比特幣這種同質化代幣不同，既不能分割成更小數值的代幣，也不可互換，只能作為獨一無二的單一整體存在。

這種非同質化代幣的每一枚都價值不同。

而現在，明顯有一個“事實正確”的版本，以及另一個有“獨特歷史”的錯誤版本。

那么花了540萬美元的那位競拍者到底拿到的是哪一個版本？

一新一舊兩版NFT哪一個又更值錢？

有人表示：

或許人們會意識到NFT就是在胡扯，并停止購買它？……我對NFT的評價和其他虛擬貨幣一樣——只有人們賦予的價值，而沒有內在價值。

不過在收藏界里，因為錯誤而更有價值的例子也并不罕見。

比如美國在1918年5月10日發行的一枚郵票，由于印刷錯誤，郵票中的柯蒂斯·珍妮-4飛機的圖案上下顛倒：

而正是因為印刷錯誤，使得這枚郵票的價格飆升。

2005年，一位美國的金融家出價297萬美元購得4枚這種倒置珍妮（Inverted Jenny）郵票。

而現在，如果競拍者得到的是一段完全正確的萬維網源代碼，但錯誤版本的舊NFT也并沒有被銷毀呢？

那么手握舊版本的拍賣行，或許正在坐擁一枚比540萬美元價值更高的代幣。

參考鏈接：
[1]https://arstechnica.com/tech-policy/2021/07/video-of-berners-lees-5-4m-nft-hints-another-exists-with-an-error/
[2]https://arstechnica.com/tech-policy/2021/06/tim-berners-lee-makes-an-nft-from-world-wide-webs-objective-c/

Tim Berners-Lee提供的這份NFT：
https://www.sothebys.com/en/buy/auction/2021/this-changed-everything-source-code-for-www-x-tim-berners-lee-an-nft/source-code-for-the-www

— 完 —

量子位 QbitAI · 頭條號簽約

關注我們，第一時間獲知前沿科技動態