文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

几款实用小工具

，我用GIF录屏软件进行录制，分别记录了电脑界面上的操作过程，有几个朋友问我怎么做的，今天分享给大家 下面简单介绍下使用方式： 就是这样一款软件，矩形框框，边框可以拉伸，控制录制的窗口大小，点击录制按钮先保存一个...，这样就很方便了，如下图，如果我们需要键盘敲一些东西，内容在两个页面的话，我直接将截图固定到我当前页面，照着抄，可以减少页面之间来回切换的次数 3、长图截取工具 1，截图界面 2，点击截取长图按钮...3，进行截取，esc进行推出截取 4，点击save as另存为 当然这个工具还可以截取其它形状的图片 4、一键下载目标网站前端代码工具 1、输入网址，比如是百度首页，点击添加 > 转到下一步...2、点击开始下载 3、下载完点击打开目录 4、网站的html、css、js、images文件全部下载好 5、打开index.html，直接就是本地下载好的网页源码，打开后即是目标网站 是不是很容易就模仿一个网站...，而且代码文件夹已经给你分好类了 6、当然你也可以Ctrl+s直接另存网页，但是文件夹分类并没有给你按照css、js、images来进行划分文件夹，而是都在一个文件夹，这是不太方便的地方 5、记事本下载网页代码

65220

9个JavaScript图像处理库，收藏好留备用

开发的浏览器网页截图工具 html2canvas 使你可以直接在用户浏览器上截取网页或部分网页的“屏幕快照”。...屏幕截图基于DOM，因此可能无法真实表示100％的准确度，因为它无法生成实际的屏幕截图，而是根据页面上可用的信息来构建屏幕截图。...你可以从项目中包含Lena.js的本地副本, 也可以使用CDN或本地副本： Demo：https://fellipe.com/demos/lena-js/ Github：https://github.com.../davidsonfellipe/lena.js 4:Compressor.js 一个使用本地canvas.toBlob API进行图像有损压缩的js库 这是一个简单的JS图像压缩器，它使用浏览器的本机...cropperjs/ Github：https://github.com/fengyuanchen/cropperjs star:9.3k 6：merge-images 一个将多张图片合并成一张图的

2.7K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素)

    若是需要截取特定元素或是窗口超过了一屏，就只能另辟蹊径了。 WebDriver.PhantomJS自带的方法支持对整个网页截屏。 下面提供几种思路。...注入第三方html转canvas的js库(见下方推荐) 获取元素html源码 将html转换为canvas 下载canvas 优点: 截取长图容易实现 缺点: 加载第三方库耗费时间，转换原理请参考这篇文章...: 将 DOM 对象绘制到 canvas 中 方式二 针对WebDriver.Chrome 截取全图，自行裁剪、拼接 获取元素位置、大小 获取窗口大小 截取包含元素的窗口 进行相应的裁剪和拼接。...所以获取指定元素的截图也就简单很多 截取网页全图 裁剪指定元素 driver = webdriver.Chrome() driver.get('http://stackoverflow.com/')...有时候我们只想截取某个网页元素的图片呢？

    10K41

    干货满满！推介几款 Mac 下非常好用的软件（第一弹）

    快捷搜索 ，快捷搜索是 Listary 也具有的功能，除了可以搜索本地文件、安装的应用、MacOS 设置项等，还可以使用网页搜索，比如输入 gg 我的存款呢？...Text Scanner 有时候你手里有一张图片，图片上很多文字，你想把图片上的文字复制到本地，又或者你发现一个网页，但是这个网页是禁止复制的（比如 App Store 上的软件介绍），你可以选择 QQ...Xnip 拥有齐全的标注功能，简单易用，可以对截取的图片进行标注，在标注的同时也可以重新调整截图区域的大小； 滚动截图，允许滚动截取屏幕之外的内容，生成长截图，轻松截取超过一屏的聊天记录、代码、文章等；...Typora 使用过很多 Markdown 编辑器，最后选择了简洁轻量的 Typora，与主流编辑器一边编辑一边预览的形式不同，Typora 使用将编辑和预览合并到一起的即时渲染方式，目光不需要在编辑区和预览区中来回切换...另外 Typora 还支持 Latex 数学公式、[TOC] 动态目录、拖拽图片自动生成本地预览链接、自定义主题、PDF/Word 导出、专注模式等方便的功能，如果你懂一点 CSS，你可以到 \Application

    1.5K10

    干货满满！推介几款 Mac 下非常好用的软件（第一弹）

    快捷搜索 ，快捷搜索是 Listary 也具有的功能，除了可以搜索本地文件、安装的应用、MacOS 设置项等，还可以使用网页搜索，比如输入 gg 我的存款呢？...Text Scanner 有时候你手里有一张图片，图片上很多文字，你想把图片上的文字复制到本地，又或者你发现一个网页，但是这个网页是禁止复制的（比如 App Store 上的软件介绍），你可以选择 QQ...Xnip 拥有齐全的标注功能，简单易用，可以对截取的图片进行标注，在标注的同时也可以重新调整截图区域的大小； 滚动截图，允许滚动截取屏幕之外的内容，生成长截图，轻松截取超过一屏的聊天记录、代码、文章等；...Typora 使用过很多 Markdown 编辑器，最后选择了简洁轻量的 Typora，与主流编辑器一边编辑一边预览的形式不同，Typora 使用将编辑和预览合并到一起的即时渲染方式，目光不需要在编辑区和预览区中来回切换...另外 Typora 还支持 Latex 数学公式、[TOC] 动态目录、拖拽图片自动生成本地预览链接、自定义主题、PDF/Word 导出、专注模式等方便的功能，如果你懂一点 CSS，你可以到 ApplicationSupportabnerworks.Typorathemes

    1.3K20

    用 PhantomJS 让邮件报表图文并茂（一）

    将图表转换为图片 虽然邮件不支持脚本生成的 canvas 图表，但却是支持图片展示的。 那么只要能将图表截取为图片添加回邮件内，就能在邮件客户端里看到了，这就是我们要做的第一步。...所以将网页内的 canvas 内容都提取出来，放到相同大小的 img 标签内，替换掉原本文档流中的 canvas，这样在邮件客户端内就能看到图表内容了吧？...对于一些具有交互效果的图表（如鼠标 hover 时展示数值），由于变成了静态图，这些交互都会消失。 所以一些关键数据，需要改为默认显示，不需要通过交互触发，以便脚本截图时能截取到。...phantomJS 脚本实现 基本思路出来了，那么如何把它运用在我们生成报表邮件的服务器上呢？ 使用 PHPMailer 和 nodemailer 等组件发送邮件时，都是提供一个本地路径作为附件参数。...组件发送邮件时从本地文件中读取并发送。 所以我们对图表的截图需要保存在本地，这里不方便通过页面内部脚本实现，我们可以借助 phantomJS 的截图 API。

    81220

    iOS学习巩固笔记-UIWebViewJavaScript

    手机上面的safai其实就是用webView来实现的  现在的开发并不完全是原生的开发，而更加倾向于原生+Html5的方式  webView是OC代码和html代码之间进行交互的桥梁 3.1.1 代码...-(void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error 加载本地资源 NSURL *url = [[NSBundle...，css决定网页的样式，js决定网页的事件 2.html学习网站：W3School 3.2 OC和JS代码的互调 OC调用JS的代码 NSString *str = [self.webView stringByEvaluatingJavaScriptFromString...:@"sum()"]; JS调用OC的说明 新的需求：点击按钮的时候拨打电话 但是我在点击按钮的时候，用户是不知道的，我们怎么能够知道用户点击了网页上面的一个按钮，只能通过一个技巧，那就是自己搞一个特定的协议头比如说...OC里面有通过字符串生成SEL类型的方法，所以当拿到数据之后做下面的事情 截取方法的名称 将截取出来的字符串转换为SEL 利用performSelect方法来调用SEL 涉及到的相关方法 //判断字符串是否以一个固定的字符开头

    1.2K70

    【计算机视觉处理三】图像基本处理

    右边我们只需要截取左半部分，因此左边的值可以省略，右边的值则是我们前面计算到的宽度。下面是效果图： ? 这里需要注意一点，彩色图像其实是三维的，但是我们没有操作第三个维度。...我们可以通过下面的代码把两个梦幻合并到一张图片上： import cv2 # 读取两张图片 img1 = cv2.imread('mh1.JPG') img2 = cv2.imread('mh2.JPG...下面是我们的效果图： ? 这里需要多说一句，我只有一个梦幻。...我们可以用opencv显示一下上面的图片： import cv2 import numpy as np # 生成一个100*100的图片，每个元素的值都为1 img = np.ones((100, 100...当然我们的图片是二维的，对opencv来说是一个灰度图。如果想要生成一个彩色图像，我们可以生成一个三维的图像，后续我们会继续讲解。

    79740

    面试官：SPA（单页应用）首屏加载速度慢怎么解决？

    一、什么是首屏加载 首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容...，避免了重复加载组件 图片资源的压缩 图片资源虽然不在编码过程中，但它却是对页面性能影响最大的因素 对于所有的图片资源，我们可以进行适当的压缩 对页面上使用到的icon，可以使用在线字体图标，或者雪碧图，...将众多小图标合并到同一张图上，用以减轻http请求压力。...是否删除原文件 })] } } 在服务器我们也要做相应的配置 如果发送请求的浏览器支持gzip，就发送给它gzip格式的文件 我的服务器是用express...('compression') app.use(compression()) // 在其他中间件使用之前调用 使用SSR SSR（Server side ），也就是服务端渲染，组件或页面通过服务器生成

    4.2K30

    微信公众号网页开发，登录授权和微信支付

    微信公众号的网页开发基本和H5移动端开发一致，主要是涉及到网页授权获取用户信息和使用js-sdk获取微信原生能力支持。...t=sandbox/login 用自己微信扫码登录，然后扫码关注当前测试号，这里注意js接口安全域名和网页授权回调域名，需要配置为当前项目地址。使用测试号时用ip即可，但是线上必须是域名。...code字段的值，如果能截取到说明是回调后的url，然后用code去后端请求换取其他信息。...JS-SDK使用 微信的js-sdk就是通过引入sdk文件，调用微信提供的api可以直接使用微信的原生个性化功能，比如自定义分享、扫一扫、拍照和支付等。...appId: '', // 必填，公众号的唯一标识 timestamp: , // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串 signature: '

    4.1K30

    流媒体播放器EasyPlayer.js播放H.265视频，无法截取快照是什么原因？

    TSINGSEE青犀视频的流媒体播放器EasyPlayer视频播放器，可支持H.264与H.265视频编码格式，性能稳定、播放流畅，还能支持RTSP、RTMP、HLS、FLV、WebRTC等视频流播放，并且已实现网页端实时录像...有用户反馈，在使用EasyPlayer.js播放H.265编码格式的视频流时，无法截取快照。针对该反馈，我们立即进行了排查。在本地测试发现，本地的H.265编码视频可以正常截图并能保存下载。...于是进行对比测试，发现是因为用户的视频分辨率较小，无法达到设定大小后，将会直接返回无法截取快照。...解决方法：在该项目中找到播放器js，修改参数，如下：找到播放器的这两个文件，并修改判断length大小，可设定为106432即可。...EasyPlayer是我们流媒体组件系列中关注度较高的工具，经过多年的发展和迭代，目前已经有多个应用版本，包括RTSP版、RTMP版、Pro版，以及js版，其中js版本作为网页播放器，受到了用户的广泛使用

    35730

    【实用技巧】如何截取网页长图

    最近需要截取一个网页长图，搜了下发现 Chrome 浏览器实现起来比较简单，顺便记录分享下。 准备：Chrome 浏览器 【1】用 Chrome 浏览器打开网页 ?...点击查看下载的图片，想截取的网页长图便到手了！ ? 个人体验：此方法对网页长图截取效果很好。...此外当整个网页是一整篇文章时，例如用浏览器打开公众号文章，通过此方法完成的网页长图也是文章长文截图——方便分享、整理和保存。...此外，个人感觉该方法应该也可以为手机端保存网页长图提供思路，以及没准可以小程序实现根据网页链接给生成该链接下网页长图？记录下思路，后续或许可以尝试下。 以上，感谢阅读～

    1.5K10

    ES6本地实时转换ES5语法(供学习使用)

    实际上babel是在项目中依托于webpack，这里单独提出来供学习对比语法使用 在线转换如下 babeljs es6console（这个貌似才行） 这里讲解本地转换和本地实时准换...-o dist/test.js 这样就会在dist目录下生成一个test.js，里面就是准换成功的ES5语法了。...当然，如果你的src只有一个index.js，执行命令可以省略这个index.js npx babel src -o dist/test.js，不过这样做就是把src下面的所有的js文件转换成ES5后合并到...2.多个文件分别转换 转换整个文件夹，并且不要合并到一个js中，执行如下命令： npx babel src -d dist 这样对应src文件目录，有多少个js就单独转换为多少个js，不会合并在一个...js 实时监控转换 执行如下命令 npx babel src -w -d dist 效果图如下： 上面内容的仓库地址：ES6本地实时转换ES5语法代码仓库

    52910

    IOS WebView控件详解

    其加载数据的方式有三种： 第一种： - (void)loadRequest:(NSURLRequest *)request; 这是加载网页最常用的一种方式，通过一个网页URL来进行加载，这个URL可以是远程的也可以是本地的...例如： //加载网络请求 - (void)loadRequest:(NSURLRequest *)request; /* 功能：加载本地HTML字符串 string为要加载的本地HTML...代理 在UIWebViewDelegate方法中，一共有4个方法需要注意： //是否允许加载网页，也可获取js要打开的url，通过截取此url可与js交互 - (BOOL)webView:(UIWebView...// 实现自动定位JS代码, htmlLocationID为定位的位置(由JS开发人员给出)，实现自动定位代码，应该在网页加载完成之后再调用 NSString *javascriptStr = [NSString...，也可获取js要打开的url，通过截取此url可与js交互 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest

    4.8K80

    爬虫入门经典(十九) | 难度提升，破解极验验证码

    (2)截图验证码 (3)通过js修改css样式，显示完整图 (4)截图验证码 (5)对比找到缺口位置来判断出位移 (6)移动 注意：截图验证码的时候需要获取位置，这个时候需要本地屏幕设置100%和浏览器设置...(2)截图验证码 (3)通过js修改css样式，显示完整图 (4)截图验证码 (5)对比找到缺口位置来判断出位移 (6)移动 2.1 访问网页，使其能够出现验证码 ? 1....2.3 截取完整图片 1....(2)截图验证码 (3)通过js修改css样式，显示完整图 (4)截图验证码 (5)对比找到缺口位置来判断出位移 (6)移动 """ from selenium import webdriver from...而我想要成为全场最靓的仔，就必须坚持通过学习来获取更多知识，用知识改变命运，用博客见证成长，用行动证明我在努力。

    1.1K10

    开源仓库贡献 —— 提交 PR

    他可以快速帮你生成文档网站。不同于GitBook、Hexo的地方是它不会生成静态的.html文件，所有转换工作都是在运行时。...安装避坑 大家在使用命令 npm i docsify-cli -g 全局安装 docsify-cli 工具时，如果你在安装 node.js 时修改了默认的路径： node_global 和 node_cache...大家感兴趣的话，可以点击这里在线阅读 PR 过程 仓库源 首先 fork 仓库 然后 clone 到本地，推荐安装 github desktop 工具，点我下载，用本地编辑器打开 默认 vscode...PR 切换到 master 分支 git checkout master 拉取远端的 master，保证最新 git pull origin master 将空分支合并到 master git merge...allow-unrelated-histories 其实你也可以直接建立 branch，无需建立空分支，从而省去解决 fatal: refusing to merge unrelated histories 错误的操作 创建 PR 现在返回网页端中你

    51820

    基于Apify+node+reactvue搭建一个有点意思的爬虫平台

    你将收获 Apify框架介绍和基本使用 如何创建父子进程以及父子进程通信 使用javascript手动实现控制爬虫最大并发数 截取整个网页图片的实现方案 nodejs第三方库和模块的使用 使用umi3...+ antd4.0搭建爬虫前台界面 平台预览 上图所示的就是我们要实现的爬虫平台, 我们可以输入指定网址来抓取该网站下的数据,并生成整个网页的快照.在抓取完之后我们可以下载数据和图片.网页右边是用户抓取的记录...它提供了管理和自动扩展无头Chrome / Puppeteer实例池的工具，支持维护目标URL的请求队列，并可将爬取结果存储到本地文件系统或云端。...如何截取整个网页快照 我们都知道puppeteer截取网页图片只会截取加载完成的部分,对于一般的静态网站来说完全没有问题, 但是对于页面内容比较多的内容型或者电商网站, 基本上都采用了按需加载的模式,...所以一般手段截取下来的只是一部分页面, 或者截取的是图片还没加载出来的占位符,如下图所示: 所以为了实现截取整个网页,需要进行人为干预.笔者这里提供一种简单的实现思路, 可以解决该问题.

    2.2K20

    vconsole使用

    截获本机请求：利用 HTTP MiTM 截取目标 WebView 的请求，在修改响应消息体后再回传。 b....修改响应消息体：向目标网页的 HTML 响应中的 body 标签注入调试脚本（文本正则替换）。 c....'> new VConsole();" 其中new VConsole() 是关键不调用不会生成界面 还有载人方式可以使用chalrs或者...fiddler替换js再头部注入 考虑加载速度的原因，没有直接使用 github 上的 vConsole 原地址，而是 dump 了一份到 coding.net 仓库里，所以上面用的是 codeing.net...的脚本地址 » vConsole 注入设置如图 同理，再新建一个断点，完成 Eruda 工具的注入（其实可以不用两个调试脚本都注入，这里只是演示效果） 第二步：在 PPHub 中找一个 WebView

    3.5K10

    如何优雅的对网页截取长图

    最近写文章想截个长图，才发现一直使用的QQ早有这个功能了，这里就整理几个pc上网页长截图的方案。...然后复制截取的长图。 ? FastStone FastStone Capture 是一款体积小巧、功能强大、简单易用的屏幕捕捉工具，集屏幕截图、图像编辑、视频录制功能于一身。 ?...点击捕获滚动窗口，然后滚动鼠标下滑，按esc停止 ，选中要截取的范围。 ? 生成的长图效果跟QQ差不多。 如果不想使用软件其实谷歌浏览器就自带截图功能。...这样会截取整个网页，如果想截取网页的一部分，选中截取的元素后 Ctrl+Shift+P ? 再输入 Capture node screenshot截图 ?...总结下，如果想简单点使用QQ就行了，想对截取的长图再操作推荐软件FastStone 。

    1.2K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券