用javascript协助导入图片

字数统计: 1.3k阅读时长: 4 min

 2012/01/23 

需求

先说说需求。春节回家见爸妈，老爸迷上了摄影。他把平时的照片都上传到了成都图片网, 这个成都图片网专门有一个 “快拍成都” 的版块，用于大家将随手拍的生活中的图片分享上去。每天编辑还会选出一张最有特色的图片，刊登到《成都商报》上。

快拍成都版块的网址是：http://photo.chengdu.cn/diary.php，另外，这个成都图片网还带有一个 “ 拍客论坛 “，论坛的网址是：http://photo.chengdu.cn/bbs/。

老爸在兴奋地给我介绍完他的光辉成果之后 , 提出了他的需求：他希望在 “快拍成都” 发完图片后，能够自动将图片保存到他在 “ 拍客论坛 “ 上的 “个人相册” 中。

调研

简单研究了一个这个网站。明显这个网站自带的论坛是改的别人的开源系统，而 “快拍成都” 这个功能由于需求比较特别，能看出来是另外开发的另一套系统。这 2 套系统仅仅是将用户个人认证功能合在一起。并没有实现图片从 “快拍成都” 导入到 “论坛相册” 的功能。所以说，只能自己想办法实现了。要么全部手工弄一遍，要么写程序来做。

简单尝试了一下手工 copy，发现完全不可行，主要是图片介绍的文字是用 css 来排版到一起的，如果单纯复制文字出来，文字的顺序会乱掉。所以只能编程搞了。

我们需要用编程实现的技术步骤很简单：

模拟登陆到快拍成都。
从个人页面中点击 “我的作品”，查看自己的作品列表。
将自己的作品列表中的每一个作品中，包括的所有图片及相对应的介绍文字都下载下来。
模拟登陆到 “ 拍客论坛 “中。
对于每一个作品，在论坛的相册中建立一个对应的相册，然后将对应的图片上传上去，并且配上对应的文字。

技术方案

其实我最熟的语言是 Java，但是如果用 Java 来做这件事情的话，我需要：

了解登陆的 Form，模拟浏览器进行登陆过程，然后保存登陆成功后的 Cookie.
模拟各种网页请求，将对应的页面内容抓取过来。
解析 html 内容，用正则表达式匹配到图片的 url 和介绍文字的内容。然后把这些都保存下来。
了解拍客论坛这个 bbs 的相应 Form 的内容，模拟上传图片和介绍。

这些步骤比较麻烦，而且有些做得好的网站，为了防止模拟登陆，通常在登陆前会执行一段混淆的 javascript，把 Form 中的用户名和密码进行进一步的加工再 POST 到服务器上。考虑到这个网站是改的开源的 bbs，可能会有相应的功能。那这样的话我还需要看 js 的代码，了解它又做了哪些事，把对应的逻辑用 Java 实现了。

每种语言都有它擅长的地方，对于网页来说，最方便处理的当然是 Javascript 了。如果用 Javascript，上面的那些麻烦的步骤都可以省略掉了。于是最后，我写了 2 段 Javascript 来处理这个工作。

第一段 Javascript，取出相应的图片 url 和介绍文字，生成第二个 Javascript 代码

var ps = $('.lazyload');
var ts = $('h5');
for (var i = 0; i < ps.length; ++i) {
   console.log($(ps[i]).attr('original'));  
}
console.log($($('h2')[0]).text());
console.log('');

for (var i = 0; i < ps.length; ++i) {
   console.log('document.getElementsByTagName("textarea")[' + i + '].value="\\');
   console.log(" 图片属性：" + $(ts[i*2]).find('p').text() + '\\');
   console.log(" 图片描述：" + $(ts[i*2+1]).find('p').text() + '";');
}