做网站的 简历,wordpress压缩图片质量,排名优化百度,域名空间做网站前言
关于【SSD系列】#xff1a; 前端一些有意思的内容#xff0c;旨在3-10分钟里#xff0c; 500-1000字#xff0c;有所获#xff0c;又不为所累。
网页截图#xff0c;windows内置了快捷命令和软件#xff0c;chrome开发者工具也能一键截图#xff0c;html2canva…前言
关于【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,钉钉的快捷截图殊不知道系统已自带。 CtrlshiftX 可选择截图范围。 Ctrl PrScrn 接截取全屏 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的命令程序 如下看如下动图 四种 Capture area screenshot 选择页面某部分进行截图。 Capture full size screenshot 截页面全屏包含可视区外的部分。 Capture node screenshot 截取某个节点的内容需要先从Elements Tab先选中某个节点。 当你选中 body或者html节点的时候某种程度等于Capture full size screenshot capture screenshot 截取页面可视区部分。
3.2 chrome 插件
Awesome ScreenshotFull page Screen Capture, Webpage Screenshot 等等都是不错的网页截图插件。
更多的嘛去谷歌应用市场至于那个啥我就再推荐一款免费开源的 freefq 的软件。 chrome-go和 谷谷访问助手插件也值得去试试。
基于浏览器API
其基本实现原理一种是基于SVG一种是基于Canvas。
4.1 基于canvas的 html2canvas
这个库可能无人不知。 其就是将元素节点画到canvas上然后生成截图但是无法渲染iframeflash等内容。
其基于Promise编写如果低版本浏览器自己找个垫片就好了使用也极其简单。
下面是代码 h1云的世界/h1div看什么看看完记得点赞/divimg crossoriginanonymoussrchttps://sf1-ttcdn-tos.pstatp.com/img/user-avatar/f1a9f122e925aeef5e4534ff7f706729~300x300.image /divbutton onclickonSnapshot()点解截图/button/divhrfunction onSnapshot() {html2canvas(document.body, {useCORS: true, // 跨域比如图片backgroundColor: null,}).then(function (canvas) {document.body.appendChild(canvas);});
}效果演示
其也有不少坑最常见的就是图片丢失方案是设置图片crossoriginanonymous以及设置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实现网页截屏方法总结
