用javascript协助导入图片

时间：2021-08-18 09:32:44

用javascript协助导入图片

需求

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

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

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

调研

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

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

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

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

技术方案

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

  1. 了解登陆的 Form，模拟浏览器进行登陆过程，然后保存登陆成功后的 Cookie.
  2. 模拟各种网页请求，将对应的页面内容抓取过来。
  3. 解析 html 内容，用正则表达式匹配到图片的 url 和介绍文字的内容。然后把这些都保存下来。
  4. 了解拍客论坛这个 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，我导照片的步骤如下：

  1. 打开 “快拍成都” 的页面，找到需要导出的照片专题。
  2. 执行我上面提到的那段 js，它会将需要下载的图片列出来，并且生成另一段 js.
  3. 手工下载上面列出来的图片到本地。
  4. 在论坛的个人相册中，把这些图片选择上传上去，然后执行生成的另一段 js，图片介绍就会自动填上了。

本来上传图片这一步也应该自动完成的，但是我无法解决浏览器对于 js 的限制：浏览器不允许 js 帮用户选择本地文件。所以这一步只能用手动来完成。

导图片的工作最终在 js 脚本的协助下，花了 1 个半小时完成了。不过心里还是有点不爽，听 zyc 说可以用 nodejs 和 jsdom 来在命令行中模拟浏览器相关的功能，所以打算试试把这个工作用 nodejs 和 jsdom 来完成。正在研究中，完成后再写一篇总结的博客。

相关文章