用javascript协助导入图片
用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');
|
第二段 Javascript 由第一段 Js 生成,用于在论坛相册中将对应图片的介绍文字填上。
有了上面的那段 JS,我导照片的步骤如下:
- 打开 “快拍成都” 的页面,找到需要导出的照片专题。
- 执行我上面提到的那段 js,它会将需要下载的图片列出来,并且生成另一段 js.
- 手工下载上面列出来的图片到本地。
- 在论坛的个人相册中,把这些图片选择上传上去,然后执行生成的另一段 js,图片介绍就会自动填上了。
本来上传图片这一步也应该自动完成的,但是我无法解决浏览器对于 js 的限制:浏览器不允许 js 帮用户选择本地文件。所以这一步只能用手动来完成。
导图片的工作最终在 js 脚本的协助下,花了 1 个半小时完成了。不过心里还是有点不爽,听 zyc 说可以用 nodejs 和 jsdom 来在命令行中模拟浏览器相关的功能,所以打算试试把这个工作用 nodejs 和 jsdom 来完成。正在研究中,完成后再写一篇总结的博客。