用javascript协助导入图片
需求
先说说需求。春节回家见爸妈，老爸迷上了摄影。他把平时的照片都上传到了 成都图片网, 这个成都图片网专门有一个 “快拍成都” 的版块，用于大家将随手拍的生活中的图片分享上去。每天编辑还会选出一张最有特色的图片，刊登到《成都商报》上。
快拍成都版块的网址是：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() + ‘";‘);}
|
第二段 Javascript 由第一段 Js 生成，用于在论坛相册中将对应图片的介绍文字填上。
有了上面的那段 JS，我导照片的步骤如下：
- 打开 “快拍成都” 的页面，找到需要导出的照片专题。
- 执行我上面提到的那段 js，它会将需要下载的图片列出来，并且生成另一段 js.
- 手工下载上面列出来的图片到本地。
- 在论坛的个人相册中，把这些图片选择上传上去，然后执行生成的另一段 js，图片介绍就会自动填上了。
本来上传图片这一步也应该自动完成的，但是我无法解决浏览器对于 js 的限制：浏览器不允许 js 帮用户选择本地文件。所以这一步只能用手动来完成。
导图片的工作最终在 js 脚本的协助下，花了 1 个半小时完成了。不过心里还是有点不爽，听 zyc 说可以用 nodejs 和 jsdom 来在命令行中模拟浏览器相关的功能，所以打算试试把这个工作用 nodejs 和 jsdom 来完成。正在研究中，完成后再写一篇总结的博客。