title: JS屏幕截图 date: 2018-07-09 10:56:58 tags:前端 categories:前端最近比较忙，很久没写博客了，今天抽空将最近项目中遇到的一些问题及一些解决方案记录一下。最近接触的项目主要是移动端的，关于移动端方面适配之类的文章太多了，对这方面的技术不做过多的阐述。主要记录下这次中遇到的一些吧。截图分享功能按钮防重复点击(节流函数应用)下拉刷新，上拉加载更多(
项目背景：最近公司需要通过生成pdf文件，这就很简单嘛，一边笑着边把需求转给了前端，当产品递给我一份花里胡哨的原型时，傻了眼，发现事情并没有那么简单。简单来说我们的需求就是：接口导出一份内容花里胡哨且打印后观感较好的pdf；于是也进行了一些技术对比调研。前端和后端生成pdf的方法网上有很多, 以下列举一些常用的方式作于参考。方法对比：前端html2canvas+jsPDF原理：将html
写文章的时候经常需要插入图片，插入现有的图片很简单，有时候制作一些优秀的网站列表的时候需要添加网页截图， 这个过程非常枯燥乏味，可以考虑开发一个命令行工具传入一个url，然后生成页面截图。使用node-webshot进行网页截图用到的npm模块有yargs和node-webshot，关于yargs的文章参考这里从零开始打造个人专属命令行工具集——yargs完全指南。node-webshot是调用p
近来研究了下phantomjs,只是初涉，还谈不上深入研究，首先介绍下什么是phantomjs。 官网上的介绍是：”PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native&nbs
一、起因使用过 Puppeteer 的小伙伴们一定多多少少接触过 Puppeteer 里面的截图功能，尤其是在一些自动化场景里，需要涉及验证码的自动识别时，必然少不了要将验证码图片截取下来，然后通过识别接口进行识别。当我以为一切都是那么美好的时候，总是会出一些幺蛾子。当运行次数达到一定量之后，就会发现很多时候其实截下来的图片并不是验证码图片这块区域的图片内容
本文章参考了使用phantomjs操作DOM并对页面进行截图需要注意的几个问题 及phantomjs使用说明 这两篇文章，初次接触phantomjs的童鞋可以去看下这两篇原文在学习中可以看下 phantomjs官方相关示例phantomjs是一个无界面浏览器，可用于网页截图和前端自动化测试，基于webkit内核（也就是chrome使用的内核），并使用js编写业务脚本来请求、浏览和操作页面。1、安
PPT怎么截图?ppt文件想要截图，并将接入插入到文件，该怎么办呢?下面是小编为大家精心整理的关于介绍ppt文件截图并插入，希望能够帮助到你们。方法/步骤1打开PPT。先将要编辑的PPT打开，小编这里用新的PPT。2点击插入。打开后将鼠标移到最左上角的地方，点击插入。3点击截图。这时候就可以看到截图功能了，点击这里，然后选择第一个选项，也只有一个选项。4等待。等一下PPT会捕捉下一个文件，也就是说
# (一) 基本功能 # (二) 常用参数实现 如何在页面中判断图片已加载完成 主动调用注入函数进行截图的场景，通常都是我们自己的业务页面，这时我们可以在页面中对资源加载情况进行判断，来决定截图的时机
原创
2022-09-26 10:25:56
1302阅读
sudo apt-get install nodejs npm
sudo npm install -g puppeteer
sudo apt-get install chromium-browser
sudo apt-get install libx11-xcb1 libxcomposite1 libasound2 libatk1.0-0 libatk-bridge2.0-0 libcair
Node.js Stream pipe细节流的pipe操作主要用于readable流向writable流传递数据，之前只是从经验角度去猜测pipe的工作原理，但遇到问题时才发现不靠谱的猜测并不能为解决问题带来帮助，所以花些时间了解一下pipe的工作原理，本文主要从源代码角度解释pipe的几个内部细节。支持多个pipe下游通过阅读源代码，发现同一个readable流支持多个pipe下游，pipe函数
下载链接：https://nodejs.org/download/release/可以用v14.1.0版本，亲测有效下载后解压，如果是linux tar.xz格式，可执行tar xz xx.tar.xz解压。
原创
2022-10-05 00:10:23
665阅读
pdf-lib npm 模块是使用Node.js创建和编辑PDF的好工具。 Puppeteer 是可以从HTML生成PDF的出色工具，但是不幸的是，以我的经验，浏览器对CSS中的打印布局的支持不是很好。 pdf-lib 模块为你提供了对PDF的非常精细的控制，它可以用来合并PDF，添加页码、水印，拆分PDF，以及你可能会使用 ILovePDF API 来进行的其它任何处理PDF文件的功能。入门让我
Mac 截图工具 iShot Pro -软件介绍、下载安装详细教程iShot -优秀，功能齐全的区域截图，窗口截图，多窗口截图，长屏幕截图，shell截图，时间间隔截图，快速注释，纹理，颜色匹配，屏幕录制，音频录制，OCR, Mac上的截图翻译。下载安装1.下载安装文件下载地址：iShot Pro ⇲2.开始安装打开我们刚刚下载好的 dmg 安装包，如下图，打开后将左侧图标移入右侧安装成功3.打开
如果你没登QQ、微信，或者没有安装专门的截屏软件，请问你的截屏方法是什么？有经验的电脑玩家会说，直接使用键盘上的按键：PrtScn（或者 PrintScreen）：全屏截屏Alt + PrtScn：当前活动窗口截屏这确实是原生的截屏方式，只不过使用这种方式截屏的图像，由于被放在了剪贴板中，所以需要粘贴（快捷键：Ctrl + V）到另外的支持图像编辑或传输的软件中，如QQ、Ps等，才能被进一步修饰和
当我一手操控鼠标，想用另一只手快速截图时，发现Win和Prt Sc比牛郎织女还要遥远，而我的手却永远变不成鹊桥......于是我苦心钻研，终于总结了一本绝世截图秘籍，无需自残，快速入门！快捷键系列1、Win + shift + S可以选择截图区域的大小，ctrl+V粘贴在word、微信等应用里。能否直接编辑修改需视系统版本而定。Win键 = 长得像“田”的键~(该快捷键其实是调用了OneNote里
[实用技巧]头图：Photo by Sam Dan Truong on Unsplash广义上的压缩指减小图片文件的体积，实现的途径一般有两种：改变图片大小，改变图片质量。改变图片大小可以通过裁切、缩放来实现，非常简单，因此，下面只介绍改变图片质量的方法，重点讲述截图压缩；方案一：截图优化大部分截图软件都提供了输出图片质量、格式的设置。提前更改软件设置，调整输出文件格式，设定压缩比例，便能截图后即
1，原图截图首先是要找到类似的图标，然后截图，我一般是使用qq截图，这里截图的时候，可以稍微截大一点，但是比例要合适，比如我最终需要24*24的图标，就需要保证截的图尽量的是正方形的：30*30或者35*35，30*50就不太理想了。 2，使用ps打开图片为了方便操作，可以适当放大图片（打开图片后，按住ctrl键和空格键的同时，左右晃动鼠标，就可以放大缩小图片了
前言：在前端日常开发中，toC的业务难免会有一些截图或者生成海报的业务需求受限于html2canvas的不兼容性，或者canvas画图的样式局限性，目前我们又有了一种新的解决方案，node + puppeteer的组合，puppeteerpuppeteer 初识Puppeteer 是 Google Chrome 团队官方的无界面（Headless）Chrome 工具。Chrome 作为浏览器市场的
转载
2021-01-30 21:19:15
521阅读
2评论
前言：在前端日常开发中，toC的业务难免会有一些截图或者生成海报的业务需求受限于html2canvas的不兼容性，或者canvas画图的样式局限性，目前我们又有了一种新的解决方案，node + puppeteer的组合，puppeteerpuppeteer 初识Puppeteer 是 Google Chrome 团队官方的无界面（Headless）Chrome 工具。Chrome 作为浏览器市场的
转载
2021-01-30 21:23:58
1393阅读
2评论
之前用express框架搭建一个后台管理应用，主要是学习node如何编写接口。今天带大家学习node如何实现过滤器，以及用户信息状态如何存储。 先来了解中间件：cookie-parser模块与express-session模块。 cookie-parser模块：这个是为了方便操作客户端中的cookie值，区别于session。npm i cookie-parser --save
app.js文件
