网页内容生成图片,这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实现网页截屏方法总结

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/538057.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Linux杂货铺】文件系统

目录 &#x1f308;前言&#x1f308; &#x1f4c1; 硬盘 &#x1f4c2; 物理结构 &#x1f4c2; 存储结构 &#x1f4c2; CHS定址法 &#x1f4c2; 操作系统对硬盘的管理和抽象 &#x1f4c1; 文件系统 &#x1f4c2; 分区 &#x1f4c2; 分组 &#x1f4c2; inode号 分配…

DL00295-基于AirSim仿真环境的无人机深度强化学习算法路径规划完整实现含详细说明文档

-创建了一个开放的AI Gym环境&#xff0c;包括多旋翼和固定翼无人机的运动学模型。 -提供了一些UE4环境来训练和测试深度强化学习DRL导航策略。 -基于AirSim和SB3。 完整代码链接见文末。 DL00295-基于AirSim仿真环境的无人机深度强化学习算法路径规划完整实现含详细说明文档

力扣HOT100 - 189. 轮转数组

解题思路&#xff1a; 三次反转。 先反转一次&#xff0c;再根据 k 拆分成两部分各反转一次。 class Solution {public void rotate(int[] nums, int k) {k % nums.length;reverse(nums, 0, nums.length - 1);reverse(nums, 0, k - 1);reverse(nums, k, nums.length - 1);}pu…

【QT教程】QT6 Web性能优化

QT6 Web性能优化 使用AI技术辅助生成 QT界面美化视频课程 QT性能优化视频课程 QT原理与源码分析视频课程 QT QML C扩展开发视频课程 免费QT视频课程 您可以看免费1000个QT技术视频 免费QT视频课程 QT统计图和QT数据可视化视频免费看 免费QT视频课程 QT性能优化视频免费看 免费…

MURF1040CT-ASEMI快恢复二极管MURF1040CT

编辑&#xff1a;ll MURF1040CT-ASEMI快恢复二极管MURF1040CT 型号&#xff1a;MURF1040CT 品牌&#xff1a;ASEMI 封装&#xff1a;TO-220F 最大平均正向电流&#xff08;IF&#xff09;&#xff1a;10A 最大循环峰值反向电压&#xff08;VRRM&#xff09;&#xff1a;4…

kubectl_入门_Pod配置以及生命周期

Pod配置以及生命周期 1. Pod结构定义 每个pod中都可以包含一个或多个容器&#xff0c;这些容器可以分为两类 用户程序所在的容器&#xff0c;数量可多可少Pause容器&#xff0c;这是每个Pod都会有的一个根容器&#xff0c;它的作用有两个 可以以它为根据&#xff0c;评估整个…

工业相机飞拍功能的介绍(转载学习)

转载至&#xff1a; https://baijiahao.baidu.com/s?id1781438589726948322&wfrspider&forpc

【Python使用】嘿马头条完整开发md笔记第5篇:数据库,1 Redis事务【附代码文档】

嘿马头条项目从到完整开发笔记总结完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;课程简介&#xff0c;ToutiaoWeb虚拟机使用说明1 产品介绍,2 原型图与UI图,3 技术架构,4 开发,1 需求,2 注意事项。数据库&#xff0c;理解ORM1 简介,2 安装,3 数据库连接…

基于SSM学生考勤管理系统需求(内附设计LW + PPT+ 源码下载)

摘 要 高校的不断扩张让在校学生数量不断的增加&#xff0c;对于教师和管理人员的需求也在不断地增强&#xff0c;对日常的学生考勤管理的工作量也在日益增加&#xff0c;传统的人工点名签到的考勤管理模式已经给无法适用于当前高校考勤管理的需求&#xff0c;同时手动录入的…

一、flask入门和视图

run启动参数 模板渲染 后端给前端页面传参 前端页面设置css from flask import Flask, render_template,jsonify# 创建flask对象 app = Flask(__name__)# 视图函数 + 路由route @app.route("/") def hello_world():# 响应,返回给前端的数据return "hello worl…

股票价格预测 | Python股票价格数据导入和处理

文章目录 文章概述代码设计导入处理文章概述 股票价格预测 | Python股票价格数据导入和处理 代码设计 导入 import os import numpy as np import csv import pandas as pd import matplotlib.pyplot

逻辑benders分解

目录 1.可行割 &#xff08;1&#xff09;组合benders割&#xff08;本质是cover cut 覆盖割&#xff09; &#xff08;2&#xff09;最小可行割&#xff08;minimal infeasible set&#xff0c;MIS&#xff09; 2.最优割 &#xff08;1&#xff09;常规最优割 &#xf…

《四》QLineEdit单行输入框

QLineEdit单行输入框 QLineEdit 是 Qt 提供的一个控件类&#xff0c;它直接继承自 QWdiget 类&#xff0c;专门用来创建单行输入框&#xff0c;如下图所示&#xff1a; 单行文本输入框 实际开发中&#xff0c;我们经常用到 QLineEdit 输入框&#xff0c;比如接收用户输入的个…

倒计时4天!百度Create AI开发者大会“大模型与深度学习技术”论坛亮点抢鲜看!

作为人工智能的核心基础技术&#xff0c;深度学习具有很强的通用性&#xff0c;大模型技术在深度学习的基础上&#xff0c;通过构建更加庞大神经网络模型和应用transformer等更加领先的算法&#xff0c;使模型的处理能力产生质的飞跃。飞桨&#xff08;PaddlePaddle&#xff09…

【JMeter】JMeter控制RPS

一、前言 ​ RPS (Request Per Second)一般用来衡量服务端的吞吐量&#xff0c;相比于并发模式&#xff0c;更适合用来摸底服务端的性能。我们可以通过使用 JMeter 的常数吞吐量定时器来限制每个线程的RPS。对于RPS&#xff0c;我们可以把他理解为我们的TPS&#xff0c;我们就不…

活动预告|如何构建云原生现代化数据栈?北京首场 Meetup 来啦!

数字化时代带来了海量的数据涌现&#xff0c;传统的数据架构已然无法满足现代企业的需求&#xff0c;现代化数据栈应运而生。基于云原生的现代化数据栈具备了多云兼容的特性&#xff0c;在不同的云环境下能够保持高性能运作&#xff0c;使企业得以无缝地处理和分析海量的数据集…

SonarQube 9.9.4 LTS社区版安装

目标 安装个SonarQube社区版. 安装SonarQube9.9.4 LTS社区版 https://binaries.sonarsource.com/Distribution/sonarqube/sonarqube-9.9.4.87374.zip # 切换到安装目录 cd /opt # 下载安装包 sudo wget https://binaries.sonarsource.com/Distribution/sonarqube/sonarqube…

Linux下使用update-alternatives管理软链接

前提 假如我们现在有这样的一个需求&#xff0c;在Linux下编译A工程时需要cmake的版本为3.26&#xff0c;编译B工程时需要cmake的版本为3.24&#xff0c;编译C工程时需要cmake的版本为3.22。每个工程必须需要对应的cmake版本&#xff0c;否则无法编译。这样就意味着我们的电脑…

探新路建“枢纽” 湖南深耕中非经贸合作“试验田”

湖南作为中国与非洲经贸合作的重要窗口&#xff0c;积极推动中非经贸关系的发展和深化。通过构建覆盖全产业链的高效运作模式&#xff0c;湖南企业能够在一周内将肯尼亚干制鳀鱼加工成为麻辣鲜香的劲仔深海小鱼并投入中国市场。此外&#xff0c;湖南还致力于推动非洲优质农产品…

【R语言从0到精通】-3-R统计分析(列联表、独立性检验、相关性检验、t检验)

上两次教程集中学习了R语言的基本知识&#xff0c;那么我们很多时候使用R语言是进行统计分析&#xff0c;因此对于生物信息学和统计科学来说&#xff0c;R语言提供了简单优雅的方式进行统计分析。教程参考《Rlearning》 3.1 描述性统计分析 3.1.1 载入数据集及summary函数 我…