昨天 Chrome62 稳定版释出，除了常规修复各种安全问题外，还增加很多功能上的支持，比如说今天要介绍的强大的截图功能。

直接截图

打开开发者工具页面，选择左上角的元素选择按钮（Inspect）

Windows 下按住 Ctrl，Mac 就按住 Command，然后在页面拖动选择区域即可。

Chrome会自动使用下载方式进行存储，如下效果图，感觉还不错。

给节点截图

比如说我们刚才手动截取的区域其实是一个Node节点，如果想完整截取这一部分，我们就需要使用节点截图功能。

首先在开发者工具里面选择节点，这个如上图所示直接点选HTML即可。

然后按下快捷键 Ctrl + Shift + p 打开命令工具，Mac下就是 Cmd + Shift + p，输入 node 选择 Capture node screenshot 即可。图片会自动下载。

那么我们真的不需要网页截图插件了，如果想截图整个网页，我们直接在根节点选取就可以了。

是不是很方便？

原文首发在我的 GitHub 博客

本文转载于:Chrome 已经原生支持截图功能，还可以给节点截图！

Chrome 已经原生支持截图功能，还可以给节点截图！的更多相关文章

  1. Chrome已原生支持“Chrome To Mobile”

    完成PC和手机端Chrome的同gmail帐号绑定后,即可按如下操作进行: 已知在版本“19.0.1084.15”中,这个功能默认未开启,需要进入“chrome://flags/”进行手工启用(早几期 ...

  2. 阿里云Aliplayer高级功能介绍(一)：视频截图

    基本介绍 H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以 ...

  3. Unittest 支持 case 失败后自动截图功能的另外两种方式

    原生的unittest框架是不支持case失败后自动截图的功能的,网上看了大家的解决办法,大体上分为两种:1.要么加装饰器2.也有人封装断言这里我们看看还有没有其他的更加方便的方法值得大家一起探讨一下 ...

  4. 大前端技术系列：TWA技术+TensorFlow.js => 集成原生和AI功能的app

    大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...

  5. 截图还在使用QQ的Ctrl + Alt + A 截图？还不会网页长截图？

    截图还在使用QQ的Ctrl + Alt + A 截图?还不会网页长截图?   手机自带快捷键,常常使用组合键进行快速截图编辑发好友.保存等,但是貌似到了电脑截图就出现了一大堆拍屏幕党,不少人需要打开微 ...

  6. 记一次"截图"功能的项目调研过程！

    目录 项目需求 功能调研 AWT Swing Html2Image PhantomJS Headless Chrome 实现方案 结论 项目需求 最近,项目接到了一个新需求,要求对指定URL进行后端模 ...

  7. canvas与html5实现视频截图功能

    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...

  8. 【转】天啦噜！原来Chrome自带的开发者工具还能这么用！(提升JS调试能力的10个技巧)

    天啦噜!原来Chrome自带的开发者工具还能这么用! (提升JS调试能力的10个技巧)   Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript ...

  9. Chrome扩展开发之四——核心功能的实现思路

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

随机推荐

  1. JZ-064-滑动窗口的最大值

    滑动窗口的最大值 题目描述 给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存在6个滑动窗口,他们的最大值 ...

  2. Thread线程基本写法用法

    //线程属性 protected Thread workerThread; protected bool isWorkerThreadStopped = true; public void Initi ...

  3. Hive数仓

    分层设计 ODS(Operational Data Store):数据运营层  "面向主题的"数据运营层,也叫ODS层,是最接近数据源中数据的一层,数据源中的数据,经过抽取.洗净. ...

  4. 从零开始Pytorch-YOLOv3【笔记】（一）配置文件解读

    前言 这是github上的一个项目YOLO_v3_tutorial_from_scratch,它还有相应的blog对其详细的解读.机器之心翻译了他的tutorial:从零开始PyTorch项目:YOL ...

  5. 矩池云上如何快速安装tensorRT

    国内镜像 https://mirrors.cloud.tencent.com/nvidia-machine-learning/ubuntu1804/x86_64/ 检查系统版本 source /etc ...

  6. C语言之判断质数算法

    今天学校OJ的一题判断是质数和合数. 首先我们要弄明白质数和合数的概念:质数就是除了本身和1以外没有其他因数的数,合数就是除了本身和1以外还有其他因数的数.注意:1既不是质数也不是合数. 明白了概念, ...

  7. java下载镜像

    镜像地址 https://repo.huaweicloud.com/java/jdk/ 如果你不知道选择哪个版本就点击下面这个链接吧 https://repo.huaweicloud.com/java ...

  8. 内网代理工具--EarthWorm

    一.简介 EarthWorm是内网穿透的神器,拥有三项功能正向代理,反向代理,端口转发. 为实现这些功能,EarthWorm建立了六大功能模块.分别是ssocksd , rcsocks , rssoc ...

  9. 提升组件库通用能力 - NutUI 在线主题定制功能探索

    开发背景 NutUI 作为京东风格的组件库,已具备 H5 和多端小程序开发能力.随着业务的不断发展,组件库的应用场景越来越广.在公司内外面临诸如科技.金融.物流等各多个大型团队使用时,单一的京东 AP ...

  10. unittest 测试用例实现

    unittest框架结构 test_case: 测试套件,每一个.py文件代表一个测试用例,测试用例以test开头,否则框架读取不到测试用例 __init__.py是做什么的? 要弄明白这个问题,首先 ...