当前位置: 首页 > news >正文

网页内容生成图片,这18般武艺你会几种呢?

前言

关于【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 其实自带了截图工具,你搜索 截图

image.png

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

image.png

window 第三方程序

2.1 聊天办公工具

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

2.2 其他工具

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

chrome浏览器

3.1 chrome 开发者工具

ctr + shift + i 唤起开发者工具,再ctr + shift + p 唤起chrome的命令程序, 如下看如下动图:

screen.gif

四种:

  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 ScreenshotFull 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);});
}

效果演示:
h2c.gif

其也有不少坑,最常见的就是图片丢失,方案是设置图片crossorigin="anonymous"以及设置html2canvas的选项useCORS

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

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

原理是SVGforeignObject标签可以包裹任意的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实现网页截屏方法总结

相关文章:

网页内容生成图片,这18般武艺你会几种呢?

前言 关于【SSD系列】&#xff1a; 前端一些有意思的内容&#xff0c;旨在3-10分钟里&#xff0c; 500-1000字&#xff0c;有所获&#xff0c;又不为所累。 网页截图&#xff0c;windows内置了快捷命令和软件&#xff0c;chrome开发者工具也能一键截图&#xff0c;html2canva…...

pytest的时候输出一个F后面跟很多绿色的点解读

使用pytest来测试pyramid和kotti项目&#xff0c;在kotti项目测试的时候&#xff0c;输出一个F后面跟很多绿色的点&#xff0c;是什么意思呢&#xff1f; 原来在使用pytest进行测试时&#xff0c;输出中的“F”代表一个失败的测试&#xff08;Failed&#xff09;&#xff0c;而…...

算法打卡day33

今日任务&#xff1a; 1&#xff09;509. 斐波那契数 2&#xff09;70. 爬楼梯 3&#xff09;746.使用最小花费爬楼梯 509. 斐波那契数 题目链接&#xff1a;509. 斐波那契数 - 力扣&#xff08;LeetCode&#xff09; 斐波那契数&#xff0c;通常用 F(n) 表示&#xff0c;形成…...

《疯狂java讲义》Java AWT图形化编程中文显示

《疯狂java讲义》第六版第十一章AWT中文没有办法显示问题解决 VM Options设置为-Dfile.encodinggbk 需要增加变量 或者这边直接设置gbk 此外如果用swing 就不会产生这个问题了。...

Python3 标准库,API文档链接

一、标准库 即当你安装python3 后就自己携带的一些已经提供好的工具模块&#xff0c;工具类&#xff0c;可以专门用来某一类相关问题&#xff0c;达到辅助日常工作或者个人想法的一些成品库 类似的 C ,Java 等等也都有自己的标准库和使用文档 常见的一些&#xff1a; os 模块…...

【Web】CTFSHOW-ThinkPHP5-6反序列化刷题记录(全)

目录 web611 web612 web613-622 web623 web624-626 纯记录exp&#xff0c;链子不作赘述 web611 具体分析&#xff1a; ThinkPHP-Vuln/ThinkPHP5/ThinkPHP5.1.X反序列化利用链.md at master Mochazz/ThinkPHP-Vuln GitHub 题目直接给了反序列化入口 exp: <?ph…...

AR智能眼镜方案_MTK平台安卓主板芯片|光学解决方案

AR眼镜作为一种引人注目的创新产品&#xff0c;其芯片、显示屏和光学方案是决定整机成本和性能的关键因素。在这篇文章中&#xff0c;我们将探讨AR眼镜的关键技术&#xff0c;并介绍一种高性能的AR眼镜方案&#xff0c;旨在为用户带来卓越的体验。 AR眼镜的芯片选型至关重要。一…...

Android网络抓包--Charles

一、Android抓包方式 对Https降级进行抓包&#xff0c;降级成Http使用抓包工具对Https进行抓包 二、常用的抓包工具 wireshark&#xff1a;侧重于TCP、UDP传输层&#xff0c;HTTP/HTTPS也能抓包&#xff0c;但不能解密HTTPS报文。比较复杂fiddler&#xff1a;支持HTTP/HTTPS…...

【LeetCode热题100】238. 除自身以外数组的乘积(数组)

一.题目要求 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 **不要使用除法&#xff0c;**且在…...

《哈迪斯》自带的Lua解释器是哪个版本?

玩过《哈迪斯》&#xff08;英文名&#xff1a;Hades&#xff09;吗&#xff1f;最近在研究怎么给这款游戏做MOD&#xff0c;想把它的振动体验升级到更高品质的RichTap。N站下载了一些别人做的MOD&#xff0c;发现很多都基于相同的格式&#xff0c;均是对游戏.sjon文件或.lua文…...

Java内存泄漏内存溢出

1.定义 OOM内存溢出是指应用程序尝试使用更多内存资源&#xff0c;而系统无足够的内存&#xff0c;导致程序崩溃。 内存泄漏是指应用程序中分配的内存未能被正确释放&#xff0c;导致系统中的可用内存逐渐减少。 2.内存泄漏的原因 可能包括对象引用未被释放、缓存未被清理等。 …...

【springboot】项目启动时打印全部接口方法

方法&#xff1a;在你springboot项目的基础上&#xff0c;创建下面的类&#xff1a; package com.llq.wahaha.listener;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.ApplicationContext; import org.springframework…...

单例19c RMAN数据迁移方案

一、环境说明 源库 目标库 IP 192.168.37.200 192.168.37.202 系统版本 RedHat 7.9 RedHat 7.9 数据库版本 19.3.0.0.0 19.3.0.0.0 SID beg beg hostname beg rman 数据量 1353M 说明:源库已经创建数据库实例&#xff0c;并且存在用户kk和他创建的表空间…...

05—面向对象(上)

一、面向对象编程 1、类和对象 &#xff08;1&#xff09;什么是类 类是一类具有相同特性的事物的抽象描述&#xff0c;是一组相关属性和行为的集合。 属性&#xff1a;就是该事物的状态信息。行为&#xff1a;就是在你这个程序中&#xff0c;该状态信息要做什么操作&#x…...

【LeetCode热题100】【链表】两数相加

题目链接&#xff1a;2. 两数相加 - 力扣&#xff08;LeetCode&#xff09; 基本思路同&#xff1a;【leetcode】大数相加-CSDN博客 数值的位置已经倒过来了&#xff0c;用一个进位记录进位&#xff0c;用一个数记录和&#xff0c;链表到空了就当成0 class Solution { publi…...

Linux命令学习—linux 的硬件管理

1.1、linux 的硬件管理 1.1.1、计算机的硬件管理 在 linux 下&#xff0c;计算机所有设备是以文件的形势存在的。 在 linux 下查看硬件信息 ①、lspci 列出所有的 PCI 设备 ②、fdisk -l 查看存储设备信息 ③、查看/proc 目录下相应的文件来查看一些设备信息 cat /proc/cp…...

通讯录项目(用c语言实现)

一.什么是通讯录 通讯录是一种用于存储联系人信息的工具或应用程序。它是一种电子化的地址簿&#xff0c;用于记录和管理个人、机构或组织的联系方式&#xff0c;如姓名、电话号码、电子邮件地址和邮寄地址等。通讯录的目的是方便用户在需要时查找和联系他人。 通讯录通常以列…...

让大模型落地有“技”可循

“2018年&#xff0c;随着Transformer预训练模型的兴起&#xff0c;自然语言处理&#xff08;NLP&#xff09;学术圈中形成了一个主流观点——NLP领域的不同技术方向&#xff0c;如文本分类、文本匹配、序列标注等&#xff0c;最终都会被归结到文本生成这一核心任务之下。”这是…...

java:字符集和字符流

字符集 规定了字符和二进制之间对应关系的一张表 字节是计算机最基本的存储单位 字符则是通过字符组成和编码而成的文本 常见字符集 1,ASCII字符集 基础字符编码标准,包含128个字符,只包括英文字母,数字和一些常见的符号 一个字节表示一个字符 所有的字符集均兼容ASCII…...

Java常见的设计模式

Java常见的设计模式 工厂模式&#xff08;Factory Pattern&#xff09;单例模式&#xff08;Singleton Pattern&#xff09;代理模式模式&#xff08;Proxy Pattern&#xff09;适配器模式&#xff08;Adapter Pattern&#xff09;观察者模式&#xff08;Observer Pattern&…...

Oracle 19c RAC集群相关日志

1.DB日志&#xff08;数据库日志&#xff09; Redo Log&#xff08;重做日志&#xff09;&#xff1a; 在Oracle数据库中&#xff0c;重做日志记录了数据库发生的所有修改操作&#xff0c;包括数据的插入&#xff0c;更新和删除。在RAC的环境中&#xff0c;每个实例都有自己的重…...

TR4 - Transformer中的多头注意力机制

目录 前言自注意力机制Self-Attention层的具体机制Self-Attention 矩阵计算 多头注意力机制例子解析 代码实现总结与心得体会 前言 多头注意力机制可以说是Transformer中最主要的模块&#xff0c;没有之一。这次我们来仔细分析一下注意力机制与多头注意力机制。 自注意力机制…...

three.js跟着教程实现VR效果(四)

参照教程&#xff1a;https://juejin.cn/post/6973865268426571784&#xff08;作者&#xff1a;大帅老猿&#xff09; 1.WebGD3D引擎 用three.js &#xff08;1&#xff09;使用立方体6面图 camera放到 立方体的中间 like “回” 让贴图向内翻转 &#xff08;2&#xff09;使…...

AI预测体彩排3第1弹【2024年4月12日预测--第1套算法开始计算第1次测试】

前面经过多个模型几十次对福彩3D的预测&#xff0c;积累了一定的经验&#xff0c;摸索了一些稳定的规律&#xff0c;有很多彩友让我也出一下排列3的预测结果&#xff0c;我认为目前时机已成熟&#xff0c;且由于福彩3D和体彩排列3的玩法完全一样&#xff0c;我认为3D的规律和模…...

spring 中的控制反转

在Spring框架中&#xff0c;控制反转&#xff08;IoC&#xff0c;Inversion of Control&#xff09;是指将对象的创建和管理交给了容器&#xff0c;而不是在应用程序代码中直接创建对象。在传统的编程模式中&#xff0c;应用程序代码通常负责创建对象并管理它们的生命周期&…...

GO并发总是更快吗?

许多开发人员的一个误解是,并发解决方案总是比串行更快,大错特错。解决方案的整体性能取决于许多因素,例如,结构的效率(并发)、可以并行处理的部分以及计算单元的竞争程度。 1. GO调度 线程是操作系统可以执行的最小单元。如果一个进程想要同时执行多个动作,它可以启动…...

echarts折线图自定义打点标记小工具

由于没研究明白echarts怎么用label和lableLine实现自定义打点标记&#xff0c;索性用markPoint把长方形压扁成线模拟了一番自定义打点标记&#xff0c;记录下来备用。&#xff08;markLine同理也能实现&#xff09; 实现代码如下&#xff1a; <!DOCTYPE html> <html…...

【图论】Leetcode 200. 岛屿数量【中等】

岛屿数量 给你一个由 ‘1’&#xff08;陆地&#xff09;和 ‘0’&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。 岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。 此外&#xff0c;你可以…...

酒店大厅装水离子雾化壁炉前和装后对比

在酒店大厅装水离子雾化壁炉之前和之后&#xff0c;大厅的氛围和体验会有显著的对比&#xff1a; 装水离子雾化壁炉之前&#xff1a; 传统感&#xff1a;在壁炉安装之前&#xff0c;大厅可能会有传统的装饰或者简单的暖气设备&#xff0c;缺乏现代化的元素。这种传统感可能会…...

城市内涝与海绵城市规划设计中的水文水动力模拟

原文链接&#xff1a;城市内涝与海绵城市规划设计中的水文水动力模拟https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247601198&idx5&sn35b9e5e3961ea2f190f9742236a7217f&chksmfa820dc9cdf584df97633f64d19bdc3e5f7d1a5a85000c8f040e1953c51b9b39c87b5…...