网页上生成一个便于用户分享的精美海报，或者对于网页内容生成截图，现在已经是一个非常常见的需求，现在怎么实现呢？

生成海报很麻烦

生成网页截图和海报一般都有两种做法，一是服务端使用 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 · 头条号签约

关注我们，第一时间获知前沿科技动态