nodejs截图指定区域?

发布网友 发布时间：2024-09-24 18:36

我来回答

共1个回答

热心网友 时间：2024-09-24 23:28

具体步骤：

安装canvas2image后运行的时候，如果报错

在node_modules/canvas2image/canvas2image.js后面加上

mac上安装node.js弹出来的输入框是什么

输入当前用户的密码

一、Mac安装nodejs

前言

由于自己的拓展需求，要临时使用到node.js，所以此次本君就在此mark下Mac下node.js的安装和简单的检验示例，给各位小主留个标记，提高下以后的效率。本章对于一些小白而言还是具有普及意义的。

step1：

访问nodejs官网），点击红色选框区域的v6.10.0LTS版本并下载，详见下图：

官网版本.png

step2：

双击刚下载的.pkg文件，打开之后按照步骤默认安装就行，安装完成后的截图如下：

安装完成.png

step3：

安装完成后，需要进一步验证下版本号等信息，在LaunchPad中打开终端，分别输入:

npm-v

node-v

两个命令，如下图出现版本信息，说明安装成功。

终端验证版本号.png

step4：

新建一个js文件，nodejsTest.js,输入下面的代码,并保存

varhttp=require("http");

http.createServer(function(request,response){

??response.writeHead(200,{????"Content-Type":"text/plain"

??});

??response.write("WelcometoNodejs");

??response.end();

}).listen(8000,"127.0.0.1");console.log("Creatserveron");

打开终端进入nodejsTest.js所在目录，输入nodenodejsTest

终端显示如下：

终端运行.png

打开浏览器，点击或者输入，如果无法打开，可以将刚才新建的js文件中的.listen(8000,“127.0.0.1”)的ip监听改成.listen(8000)，然后点击或者输入

浏览器测试.png

二、#Mac系统下SublimeText运行JavaScript控制台

SublimeText2下载地址：(ht.com/)

SublimeText2.png

前言

JavaScript控制台的调试和输出在浏览器端的使用算是工作中常用了，作为前端开发主力编辑器SublimeText本身是不支持JavaScript的输出和运行的。有的时候我们需要看一下输出的效果，不得不借助于F12查看控制台的程序。作为插件系统及其丰富的编辑器，我们可以通过添加BuildSystem的方法来让SublimeText支持JavascriptConsole控制台调试。

JSC方式（MacOSX）

step1：

Mac内置了一个javascript控制台程序，路径比较深,(可以用命令"open目录"来打开目录)

/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc?

打开目录.png

step2：

启动Sublime?Text，ToolsBuildSystemNewBuildSystem，如下图所示:

NewBuildSystem.png

step3：

配置选项内容，保存在默认的User目录

{?

??"cmd":["/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc","$file"],?

??"selector":"source.js"?}?

保存.png

菜单SublimeText-preferences-browserpakager,打开目录

打开目录.png

step4：

新建一个JS文件测试控制台输出效果,使用快捷键Command+B按钮进行调试，需要注意的是这里使用debug，而不能使用console.log；选择编译系统，菜单ToolsBuildSystemAutomatic或者JSC

vartemp={name:'lili',age:28};?

for(vari=2;i=0;i--){?

??debug("SublimeTest3:"+i);?

}?

debug(temp);?

//输出?//--SublimeTest3:2?//--SublimeTest3:1?//--SublimeTest3:0?//--[objectObject]?

截图如下所示：

截图.png

NodeJS方式

step1：

下载安装NodeJS，安装步骤详见上文所述，检查是否安装了NodeJS，在终端中运行node-v命令

step2：

重复上文中JSC方式的第二步，在BuildSytem添加以下内容:保存为NodeJS.sublime-build

{?

??"cmd":["node","$file"],?

??"selector":"source.js"?}?

按照如上方式操作后，你可能会发现自己怎么不OK呢？！可能自己就是那不幸运的一部分，如果你没有成功也不用着急，可以参考以下方式，接着来Doit！

在终端运行:whichnode

获取路径如下:/usr/local/bin/node

重新配置如下:

{?

??"cmd":["/usr/local/bin/node","$file"],?

??"selector":"source.js"?}?

step3：

测试输出效果:

vartemp={name:'lili',age:24};?

for(vari=2;i=0;i--){?

??console.log("SublimeTest3:"+i);//在NodeJS下没有debug()函数?}?

console.log(temp);?

//输出?//SublimeTest3:2?//SublimeTest3:1?//SublimeTest3:0?//{name:'lili',age:24}?

安装PackageControl

如果需要使用SublimeTest安装插件，可以访问这个网站ol.io/installation，按照说明安装PackageControl。重启sublimetext，在packagecontrolInstall中搜索这个插件并下载。也就是说这个插件可以在sublime中直接搜索下载。

使用node-webshot进行网页截图

用到的npm模块有yargs和node-webshot，关于yargs的文章参考这里从零开始打造个人专属命令行工具集——yargs完全指南。

node-webshot是调用phantomjs来生成网页截图的，phantomjs是非常有名的npm项目，相当于一个脚本版的WebKit浏览器，通过phantomjs可以使用脚本和网页进行交互，所以phantomjs经常用来进行网页自动化测试。

phantomjs会和普通的浏览器一样加载完整的网页内容，然后在内存里面进行渲染，虽然肉眼看不到它渲染的页面，但是通过生成图片就可以看到了，node-webshot使用的就是phantomjs的render接口来获取网页截图的。

node-webshot生成谷歌首页的示例代码：

varwebshot=require('webshot');webshot('google.com','google.png',function(err){//screenshotnowsavedtogoogle.png});phantomjs生成谷歌首页的示例代码：varpage=require('webpage').create();page.open('',function(){page.render('github.png');phantom.exit();});

那为什么不直接使用phantomjs呢?一个字懒!

另外node-webshot还对文件读写进行了简单的封装，相信任何熟悉node.js的开发人员，都能很简单的写出这样的接口，但是既然轮子好用就不要自己造了。

node-webshot流式调用的写法：

varwebshot=require('webshot');varfs=require('fs');varrenderStream=webshot('google.com');varfile=fs.createWriteStream('google.png',{encoding:'binary'});renderStream.on('data',function(data){file.write(data.toString('binary'),'binary');});

node-webshit还支持生成移动版的网页截图：

varwebshot=require('webshot');varoptions={screenSize:{width:320,height:480},shotSize:{width:320,height:'all'},userAgent:'Mozilla/5.0(iPhone;U;CPUiPhoneOS3_2likeMacOSX;en-us)'+'AppleWebKit/531.21.20(KHTML,likeGecko)Mobile/7B298g'};webshot('flickr.com','flickr.jpeg',options,function(err){//screenshotnowsavedtoflickr.jpeg});

最后再把yargs和node-webshot进行集成，可惜这部分工作人家也帮我们做好了，直接安装就行。

npmisntall-gwebshot-cli

使用desktop-screenshot进行系统截图

desktop-screenshot是一个跨平台的系统截图项目，用法和node-webshot类似，只是少了一个url参数。varscreenshot=require('desktop-screenshot');screenshot("screenshot.png",function(error,complete){if(error)console.log("Screenshotfailed",error);elseconsole.log("Screenshotsucceeded");});

首先需要制作一个nodejs小程序，然后通过该程序开始运行算法，通过小程序的建模生成图片，这样就可以通过算法生成大量的图片。首先，先介绍广告创意图片的整体生成流程：用户先提供必要的信息，如广告标题、促销信息、广告商品图等，然后通过接口发送做图程序。

做图程序是一个nodejs服务，nodejs会启动一个后端的headless模式的chrome，我们使用的是puppeteer，然后puppeteer启动真正的做图程序。

做图主程序使用js和canvas进行编写，js根据传入的参数，计算出最合适的模板，然后进行配色、配置背景图、装饰文本、装饰商品图等各种繁琐细节的操作，最终在HTML里通过canvas渲染出所有的创意图片。

最后再通过nodejs，做图完成，nodejs再调用puppeteer计算位置关系等进行截图，生成最终的图片。

请使用nodejs

varwebpage=require('webpage')

,page=webpage.create();

page.viewportSize={width:1440,height:900};

page.clipRect={top:0,left:0,width:1440,height:900};

page.settings={

javascriptEnabled:true,

loadImages:true,

userAgent:'Mozilla/5.0(X11;Linuxi686;rv:31.0)Gecko/20100101Firefox/31.0'

};

page.open('',function(status){

vardata;

if(status==='fail'){

console.log('openpagefail!');

}else{

page.render('./snapshot/test.png');

}

//releasethememory

page.close();

});

很多情况下，我们都需要在电脑上做一些截图的操作。有哪些常用的截图方法呢？

1、按键盘上的printscreen键：这个方法很麻烦，估计很少人用吧！

如果有如下需求：

1、截取一个网页，也就是一个滚动窗口的所有内容；

2、需要重复截取屏幕上的某一个固定区域，比如一个窗口截图一次后，做了一些修改，要重复截取一次，标识改变的地方；

3、在截图上画矩形框、气泡框、箭头，加汉字等

这样的需求，QQ截图虽然可以实现，但是那就太麻烦了，所以今天给大家推荐一款快捷好用的截图软件，叫做PicPick

软件安装包不大，开启后占用约25MB内存，所以即使设定为开机启动，也不会造成太大的性能影响。同时，这款软件原生支持全中文，并且对于个人及家庭用户是免费的，也不用考虑是否需要汉化或者破解之类的问题。

工具/原料

PicPick

windows

软件主界面介绍

1首先需要下载此软件，截止2013-11-06，最新的版本应该是3.2.8。安装过程中，会要求安装另一个系统优化的软件，大家直接拒绝就可以了

2安装完毕后，此软件界面如图，主要的功能也都体现在主界面上了。

右边的实用工具就不多介绍了，一看就明白，支持“屏幕取色”、“调色”、“放大镜”、“标尺”、“坐标轴”、“量角器”和“白板”功能。绝对是设计师和PPTer的好帮手。

主界面左下方的截图工具才是重点，介绍如下：

1、全屏：当前整个屏幕

2、窗口控件：使用这个截图功能的时候，会出现一个红框，单击鼠标，红框范围内的窗口就会被截取了

3、滚动窗口：比如一个很长的网页，支持一次性截取为图片。虽然很多浏览器都支持，但是这个软件还支持比如IE之类的浏览器，很实用。

4、矩形区域：最常用的，截取一个矩形框中的内容

5、固定区域：截取某一个固定区域

6、任意形状：比如截图一个圆形啊、心形啊之类的都可以

7、重复上次截取：这才是真正的最实用的功能，可以把上一次截取的区域再截取一次，超级好用

截图步骤

1PicPick软件截图，有如下的方法：

1、主界面截图：就是在如下界面上，选择相应的功能

2、在工具栏托盘中，单击PicPick的图标，选择“截取屏幕”

3、使用快捷键，具体的键位设定请参见软件的设置界面，图片中是我最常用的功能和自定义的快捷键

4、在编辑图片的窗口，左上角的文件菜单中，选择截取屏幕

图片修改

1截图之后会自动打开图片编辑的窗口，如图，最常用的文字、矩形框等工具都在界面最上方，使用方法也很简单，单击相应的图形即可

其他设置

1建议勾选该软件的如下设置，会让软件更好用

2建议让软件开机自动启动即可，因为不占太多内存，功能也足够强大