借用Automator批量下载头像的方法(完善篇)

作者:胖五原文链接

上篇文章的最后说要解决的几个问题通过一个下午的折腾终于搞定了。

先放程序,需要的拿走,后面会讲解实现思路与遇到的坑

百度云:https://pan.baidu.com/s/1o8dNQxc
Github:https://github.com/pangwu86/AutomatorCollection

程序使用前必要设置

由于程序需要控制Safari浏览器进行一定的操作,所以需要开启Safari中“允许Apple事件中的javascript”功能,具体操作步骤如下:

  1. 开启Safari浏览器的开发者模式,在偏好设置中,“高级”界面最下方勾选中即可。

  2. 勾选“允许Apple事件中的javascript”,在菜单栏中“开发”下,保持其为勾选状态,这里是需要用户输入密码的。

《借用Automator批量下载头像的方法(完善篇)》

《借用Automator批量下载头像的方法(完善篇)》

否者的话在运行过程中就会弹出下面的提示了

《借用Automator批量下载头像的方法(完善篇)》

<!–more–>

实现自动打开页面并下载图片

先分解下整个实现的过程:

  1. 新建文件夹以便后面保存下载图片。这里文件夹采用“头像”+“当前时间”来进行命名,这样可以保证每次生成的目录都不会重名

  2. 打开浏览器,并打开指定的页面。这里是唤起Safari浏览器,因为系统默认自带,而且Automator也是对Safari有相关操作的支持

  3. 控制页面不断向下滚动加载更多图片。默认首页只有十几张图片远远不够用,所以需要多加载一些出来。

  4. 解析页面中图片地址。

  5. 下载图片到指定文件夹中

之后的操作就是上篇文章的内容了,直接将相关操作加到后面即可。

接下来说一下实现过程中的难点

浏览器的相关控制

mac系统中可以通过AppleScript脚本对系统中的程序进行一定的控制。

打开浏览器并打开页面:

on run
    tell application "Safari" to open location "http://image.baidu.com/search/index?tn=baiduimage&ps=1&lm=-1&cl=2&nc=1&ie=utf-8&word=头像"
end run

打开页面地址其实可以通过变量进行设置,而且这个变量也可以通过系统的剪切板进行设置,这样就可以修改成一个更加通用的图片下载工具。

《借用Automator批量下载头像的方法(完善篇)》

不过这里为了能达到“一键下载”的功能所以将地址直接写在了脚本中。

为了能看到接下来的操作,还加上了将浏览器切换到前台的操作:

tell application "System Events"
    set frontmost of process "Safari" to true
    keystroke "1" using command down
    delay 0.2
end tell

页面的相关控制

在需要加载更多图片的时候要将页面不停的向下滚动,这里就是靠javascript来控制滚动条不断的移动到底部从而达到目的。

实现滚动条到底的js脚本非常简单,这里封装了一个方法:

function gotoBottom() {
    var $mybody = document.body;
    $mybody.scrollTop = $mybody.scrollHeight
}

Automator中调用js有一些特别的写法与限制,首先需要一个run方法,是否有传入参数可以根据Automator中的设置来定

function run(){
    // 脚本内容
    var scriptText = "";
   
    // safari中执行
    var Safari = Application('Safari');
    var cutab = Safari.windows[0].currentTab;
    Safari.doJavaScript(scriptText, {in: cutab});
}

这里Safari.doJavaScript是有返回值的,后面会详细再说。

这里scriptText需要将js代码进行拼接,所以推荐现在其他地方写好并测试通过后在加到Automator中。
最终这里实现了一个连续调用20次滚动到底的操作的代码:

function run(input){
    // 向下滚动脚本
    var scriptText = "";
    scriptText += 'var _gbTimer = null;';
    scriptText += 'var _gbCount = 0;';
    scriptText += 'var _gbMax = 20;';
    scriptText += 'var $mybody = document.body;';
    scriptText += 'function gotoBottom(){$mybody.scrollTop = $mybody.scrollHeight};';
    scriptText += '_gbTimer = setInterval(function(){if(_gbCount < _gbMax){gotoBottom(); _gbCount++} else {clearInterval(_gbTimer)}}, 200);';

    // safari中执行
    var Safari = Application('Safari');
    var cutab = Safari.windows[0].currentTab;
    Safari.doJavaScript(scriptText, {in: cutab});
}

获取图片url的坑

这里本来是使用Automator自带的方法来解析页面中图片地址的

《借用Automator批量下载头像的方法(完善篇)》

但经过测试发现,该操作最后得到的图片地址只有页面刚刚加载完成时的那些,通过滚动到底部加载的图片并没有被解析到。

后来发现该操作的输入的参数是网页的url,也就是说其他它的内部实现其实是“通过一个内置的浏览器打开对应url,然后解析页面中的图片地址”,所以跟我们之前打开的浏览器窗口没有半毛钱关系,也就无法拿到下面加载出来的图片地址了。

所以这里继续采用javascript的方式来获取页面的图片地址。

实现一个js方法获取图片的地址并放到一个数组里,然后返回到Automator:

function run(){

    // 获取图片数量
    var scriptText = "";
    scriptText += 'function allImages(){';
    scriptText += ' var imgs = [];';
    scriptText += ' var $imgs = document.getElementsByTagName("img");';
    scriptText += ' var imax = $imgs.length;';
    scriptText += ' for(var i=0;i<imax;i++){imgs.push($imgs[i].src);console.log($imgs[i].src)}';
    scriptText += ' console.log("hasimg:" + imgs.length);';
    scriptText += ' return imgs;';
    scriptText += '};';
    scriptText += 'allImages();';

    // safari中执行
    var Safari = Application('Safari');
    var cutab = Safari.windows[0].currentTab;
    var allimgs = Safari.doJavaScript(scriptText, {in: cutab});
    return allimgs;
}

虽然Safari.doJavaScript是可以有返回值的,但上述写法却始终拿不到。
经过测试发现Safari.doJavaScript执行那种直接返回内容的脚本可以,对于执行方法的返回值无效,所以修改后的脚本如下:

function run(){    

    // safari中执行
    var Safari = Application('Safari');
    var cutab = Safari.windows[0].currentTab;
    var imgs = [];
    var scriptText = 'document.getElementsByTagName("img").length';
    var imax = Safari.doJavaScript(scriptText, {in: cutab});
    for (var x = 0; x < imax; x++) {
        scriptText = 'document.getElementsByTagName("img")[' + x + '].src';
        imgs.push(Safari.doJavaScript(scriptText, {in: cutab}));
    }
    return imgs;
}

最终成功拿到了页面中所有图片的地址。

接着就是使用Automator自带的图片过滤与下载功能了

《借用Automator批量下载头像的方法(完善篇)》

最后总结

最终的程序如下:

《借用Automator批量下载头像的方法(完善篇)》

虽然看着步骤很多,但其实每一步操作都只做了一件事情。

一个本来看上去很复杂的工作也就这样被层层分解为了一件件小工作,这才是最常见也最有效的解决问题之道呀。

最后说一句,Automator真的很强大,熟练掌握以后真的是可以做到事半功倍了。

    原文作者:pangwu86
    原文地址: https://segmentfault.com/a/1190000008408862
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞