【SSD系列】网页内容生成图片，这18般武艺你会几种呢？

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战。

前言

关于【SSD系列】：
前端一些有意思的内容，旨在3-10分钟里， 500-1000字，有所获，又不为所累。

网页截图，windows内置了快捷命令和软件，chrome开发者工具也能一键截图，html2canvas和无头浏览器均可以实现，您须要哪种呢？

为了方便移动端阅读，列一个大纲：

• windows 内置
  • window 内置快捷键截图
  • windows 内置软件截图
• window 第三方程序
  • 聊天办公软件
  • 其余软件
• chrome浏览器
  • chrome 开发者工具
  • chrome 插件
• 网页内代码生成截图
  • 基于canvas的 html2canvas
  • 基于SVG的 dom-to-image 和 rasterizeHTML.js
• 无头浏览器 puppeteer等

windows自带

1.1 window 内置快捷键

可能不少人习惯了微信，QQ,钉钉的快捷截图，却不知道，系统已自带。

1. Ctrl+shift+X
   可选择截图范围。

2. Ctrl + PrScrn
   接截取全屏

3. Alt + PrScrn
   截取全屏

1.2 windows 内置软件

winodws10 其实自带了截图工具，你搜索 截图

或者cmd 输入 SnippingTool.exe， 您就能够进行截图了，体验比微信查一些，可是一种备用方案。

window 第三方程序

2.1 聊天办公工具

微信，QQ, 钉钉等等都自带截图功能。

2.2 其余工具

有不少，我就推荐一下 Snipaste , 能够截图多张，放在桌面上，配合 天若OCR 图片转文字，堪称完美。 别人贴的图片代码，分分钟变成文字，直接使用。

chrome浏览器

3.1 chrome 开发者工具

先 ctr + shift + i 唤起开发者工具，再ctr + shift + p 唤起chrome的命令程序， 以下看以下动图：

四种：

1. Capture area screenshot
   选择页面某部分进行截图。

2. Capture full size screenshot
   截页面全屏，包含可视区外的部分。

3. Capture node screenshot
   截取某个节点的内容，须要先从Elements Tab先选中某个节点。 当你选中 body或者html节点的时候，某种程度等于Capture full size screenshot

4. capture screenshot
   截取页面可视区部分。

3.2 chrome 插件

Awesome Screenshot，Full page Screen Capture, Webpage Screenshot 等等都是不错的网页截图插件。

更多的嘛，去谷歌应用市场，至于那个啥，我就再推荐一款免费开源的 freefq 的软件。 chrome-go和 谷谷访问助手插件也值得去试试。

基于浏览器API

其基本实现原理，一种是基于SVG，一种是基于Canvas。

4.1 基于canvas的 html2canvas

这个库，可能无人不知。 其就是将元素节点画到canvas上，而后生成截图，可是没法渲染iframe，flash等内容。

其基于Promise编写，若是低版本浏览器，本身找个垫片就行了，使用也极其简单。

下面是代码：

<h1>云的世界</h1>
    <div>看什么看，看完记得点赞</div>
    <img crossorigin="anonymous" src="https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/f1a9f122e925aeef5e4534ff7f706729~300x300.image" />
    <div>
        <button onclick="onSnapshot()">点解截图</button>
    </div>
    <hr>

function onSnapshot() {
    html2canvas(document.body, {
        useCORS: true,  // 跨域，好比图片
        backgroundColor: null,
    }
    ).then(function (canvas) {
        document.body.appendChild(canvas);
    });
}
复制代码

效果演示：

其也有很多坑，最多见的就是图片丢失，方案是设置图片crossorigin="anonymous"以及设置html2canvas的选项useCORS。

更多问题参见 html2canvas的踩坑之路 和 html2canvas issues

4.2 基于SVG的 dom-to-image 和 rasterizeHTML.js

原理是SVG的foreignObject标签能够包裹任意的html内容。

虽然提到这两个库，可是都有几年没维护和更新了，可是思路值得学习。

无头浏览器

puppeteer, PhantomJS, , SlimerJS等等无头浏览器，也具有截图的能力，puppeteer属于后起之秀， 很是看好。

puppeteer截图代码也是至关的简单：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });

  await browser.close();
})();
复制代码

其余

6.1 先转为pdf,pdf再导出为图片

网页打印能够将其直接导出为pdf， 固然也有不少程序能够将网页转为pdf。
好比 wkhtmltopdf。
好比 python的 pdfkit。

wkhtmltopdf也是能够直接生成图片的，很强大。

6.1 搜狗浏览器，360等国产浏览器

菜单有功能选项，另存为图片
复制代码

写在最后

写做不易，你的一赞一评就是我前行的最大动力。

html2canvas的踩坑之路
JavaScript实现网页截屏方法总结