解析web网页并保存页面中的图片

标签: 计算机技术 javascript jquery node.js | 发表时间:2012-03-01 15:21 | 作者:Marshal
出处:http://marshal.easymorse.com

这个功能,是很多类似爬虫的应用需要实现的。

如果使用node.js,你会惊讶的发现,这个任务实现起来很容易,就象写嵌入在页面中的javascript一样。

建议没接触过node.js的,可以先看看 node.js能干什么?,里面已经包含了最简单的解析web网页的功能。

这次做的是更具体的事情,我想把维基百科的坦克词条文章抽取出标题和一个图片:

要想开发这个应用,需要为node.js安装jquery库,因为我要用它处理html dom树。具体做法,可参见 在node.js中使用jquery

这是我第一次使用WebStorm做web前端项目开发,之前主要用Eclipse。放弃Eclipse是因为它的问题越来越多,比如编辑javascript有时候莫名其妙的弹出错误。我估计这和IBM减少对它的投资有关。使用WebStorm的感受很好,我计划在试用结束后购买正式版本。

代码很短,我在github上开了个项目,源代码 见这里

如果已经本地安装了node和jquery for node,那么就可以执行:

$ node app.js
book.title: 坦克 book.coverImageUrl: //upload.wikimedia.org/wikipedia/commons/thumb/7/73/Iraq-m1_abrams.jpg/300px-Iraq-m1_abrams.jpg
file saved

执行后,会在当前目录找到文件tank.png,这是下载的图片文件。

我把源代码贴在这里:

//声明所需依赖库的对象
var $ = require(‘jquery’),
fs = require(‘fs’),
http = require(‘http’);

//http参数对象
var options = {
host:’zh.wikipedia.org’,
port:80,
path:’/wiki/%E5%9D%A6%E5%85%8B’
};

var html = ”;//http获取html字符串
var tankBook = {};//分析html获得数据对象

http.get(options, function (res) {
res.on(‘data’,
function (data) {//加载数据,一般会执行多次
html += data;
}).on(‘end’, function () {//加载完成
var dom = $(html);//生成文档树
tankBook.title = dom.find(‘#firstHeading’).text();//获取文档标题
tankBook.coverImageUrl = dom.find(‘.thumbimage’).first()[0].src;//获取文档封面图url
console.log(‘book.title: ‘ + tankBook.title + ‘ book.coverImageUrl: ‘ + tankBook.coverImageUrl);
savekImageFile();
});
});

function savekImageFile() {
var hostName = tankBook.coverImageUrl.split(‘/’)[2];
var path = tankBook.coverImageUrl.substring(tankBook.coverImageUrl.indexOf(hostName) + hostName.length);

var options = {
host:hostName,
port:80,
path:path
};

http.get(options, function (res) {
res.setEncoding(‘binary’);
var imageData = ”;

res.on(‘data’, function (data) {//图片加载到内存变量
imageData += data;
}).on(‘end’, function () {//加载完毕保存图片
fs.writeFile(‘tank.png’, imageData, ‘binary’, function (err) {
if (err) throw err;
console.log(‘file saved’);
});
});
});
}

代码不多,我重点说一下两个处理内容。

javascript不支持前向后向查找结合使用,这样,我在取图片链接的时候遇到点儿麻烦:

//upload.wikimedia.org/wikipedia/commons/thumb/7/73/Iraq-m1_abrams.jpg/300px-Iraq-m1_abrams.jpg

我需要得到host name:

upload.wikimedia.org

可能办法很多,我最终使用字符串的处理方法解决的。

还有一个事情,javascript是处理不了二进制内容的,这是和flash很大的区别,当然,这种认识是针对目前的浏览器的。node.js脱离浏览器,因此不受这个限制。它的fs模块可直接操作文件。

另外,我使用Mac Lion,WebStorm的一些组合快捷键,使用到f功能键,比如shift+f10,是运行项目,可是f10被用于缩小(平铺)当前应用各窗口了。我在settings的keymap中,为run增加了command+shift+R,本来想用command+R,这样就和我用xcode的快捷键一致了,但是冲突。

还有个问题,WebStorm开发,怎么集成对node的支持。主界面有个图标:

用它设置你的node.js源代码的目录。也许有人下载了直接可以运行的node.js,那需要再下载一下node.js的源代码包,在github上。

执行node应用,也需要设置一下,创建单独的node.js运行配置:

相关 [解析 web 网页] 推荐:

解析web网页并保存页面中的图片

- - Marshal's Blog
这个功能,是很多类似爬虫的应用需要实现的. 如果使用node.js,你会惊讶的发现,这个任务实现起来很容易,就象写嵌入在页面中的javascript一样. 建议没接触过node.js的,可以先看看 node.js能干什么. ,里面已经包含了最简单的解析web网页的功能. 这次做的是更具体的事情,我想把维基百科的坦克词条文章抽取出标题和一个图片:.

简单***的实现,利用js解析把web网页转换成自己的网页,加快开发

- - ITeye博客
利用开源js引擎rhino+jsoup进行web裁制,使用javascript来解析页面. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

Web 直播流的解析

- - IT瘾-geek
Web 进制操作是一个比较底层的话题,因为平常做业务的时候根本用不到太多,或者说,根本用不到. 现在比较流行的就是音视频的处理,怎么说呢. 如果,有涉及直播的话,那么这应该就是一个非常. 我这里就不废话了,先主要看一下里面的基础内容. 首先,一开始我们是怎么接触到底层的 bit 流呢. 记住:只有一个对象我们可以搞到 bit 流 --> ArrayBuffer.

自适应网页设计(Responsive Web Design)

- - 阮一峰的网络日志
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端. 于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页. 手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素.

自适应网页设计/响应式Web设计

- - HTML5研究小组
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端. 于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页. 手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素.

Evernote Web Clipper – 保存、标注和分享网页[Chrome]

- - 小众软件
Evernote Web Clipper 是大象公司专门为 Evernote 保存、标注和分享网页用的 Chrome 扩展,可以直接在网页上像 Skitch 一样标记,支持快捷键,支持一键分享. Web Clipper Chrome 更像是 Evernote 几个产品的整合,使之用起来更加连贯.

常见六大Web 安全攻防解析

- - SegmentFault 最新的文章
在互联网时代,数据安全与个人隐私受到了前所未有的挑战,各种新奇的攻击技术层出不穷. 本文主要侧重于分析几种常见的攻击的类型以及防御的方法. 想阅读更多优质原创文章请猛戳 GitHub博客. XSS (Cross-Site Scripting),跨站脚本攻击,因为缩写和 CSS重叠,所以只能叫 XSS.

Google 正在打造一个可统领所有网页操作的 Web Intents API

- Yori - 谷奥——探寻谷歌的奥秘
Chromium Blog宣布Google正在打造一个被称为Web Inents的系统,它将允许Chrome用户在不同网页应用之间传输数据,甚至可以让Android用户在不同应用之间分享数据. 其方法就是创造一个通用的API,使得所有网页应用都可调用并存取数据,并允许其它网页应用使用. Google举了一个图片分享网站的例子,比如这个图片分享网站有一个编辑功能,那么就可以使用Web Intents API来让用户使用其它任何一个基于网页的图片编辑器来编辑图片.

优化网页速度-SEOs和Web开发者可执行的技巧

- Jimmy - SEM WATCH
我确信你们大多数人都非常清楚,网页速度已经成为搜索引擎的排名因素. 虽然对于搜索引擎来说,它不是一个关键因素,但是对访问者来说,我一直感觉它是的. 伴随着大量的人们使用超快的宽屏(并且数量在增长中),对于缓慢载入网站的耐心正在消耗. 个人来说,我讨厌等待一个页面的载入,并且我相信我的访问者也是这样的.

响应式的WEB设计(三)- 桌面及移动设备的网页性能

- - 博客园_首页
移动设备由于受到带宽、处理器运算速度的限制,因而对网页的性能有更高的要求. 究竟是网页中的何种元素拉低了网页在移动设备中加载的速度呢. 这些元素应该做何处理以提升页面在移动设备中的整体性能. 是否存在一种设计模式可以同时满足移动端及桌面端的页面设计呢. 2、移动设备中网页的性能检测. 3、移动设备网页的性能瓶颈.