用phantomjs和shell寫抓取網頁圖片的腳本

最近本身寫程序的時候常常素材不夠用，想去網上扒現成的圖片，要扒不少的圖片，這種重複勞動讓我又想偷懶看能不能用程序自動化實現。
找到了比較適合我用的兩個工具—— phantomjs 和 shell 。
phantomjs http://phantomjs.org/ 支持模擬瀏覽器打開網頁，執行腳本用js就能夠寫，適合前端。有時候碰到那些不實時渲染img源地址的，還能夠在瀏覽器開發者工具console裏跑一下，代碼複用度高。
shell 主要是以爲用wget作下載系統消耗可能少一點，而後用慣了mac偶爾寫寫腳本也還順手。想的是用phantomjs拿到圖片地址後，存到一個文件裏，腳本逐行讀而後wget下載就好了，很方便。

phantomjs腳本代碼

主要是實現圖片匹配的正則表達式。其餘的部分關於phantomjs的實如今官網不少例子裏能看到。
img.js :

// img.js
var page = require('webpage').create(),
  system = require('system'),
  fs = require('fs'),
  address, output, size;

if (system.args.length < 2 || system.args.length > 4) {
  console.log('Usage: img.js URL filename');
  phantom.exit(1);
} else {
  address = system.args[1];
  output = system.args[2];

  page.viewportSize = {
    width: 600,
    height: 600
  };

  page.open(address, function(status) {
    if (status !== 'success') {
      console.log('Unable to load the address!');
      phantom.exit(1);
    } else {
      setTimeout(function () {
        var imglist = page.evaluate(function() {
          var html = document.body.innerHTML;
          var list = [];
          // 匹配圖片（g表示匹配全部結果i表示區分大小寫）
          var imgReg = /<img.*?(?:>|\/>)/gi;
          // 匹配src屬性
          var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
          // 排除base64
          // var base64Reg = ;
          var arr = html.match(imgReg);
          
          for (var i = 0; i < arr.length; i++) {
              var src = arr[i].match(srcReg);
              //獲取圖片地址
              if (src[1]) {
                var img = src[1];
                // base64的不要，本地的圖片不要
                if (!img.match(/data:image\//i) 
                  && img.match(/(http|ftp|https):\/\/[\w\-_]+/i)
                  // 數組去重
                  && list.indexOf(src[1]) == -1
                ) {
                  list.push(src[1]);
                }
              }
          }
          return list;
        });
        console.log('匹配圖片數：' + imglist.length);
        var content = imglist.join('\n');
        if (output) {
          try {
            fs.write(output, content, 'w');
            console.log('已輸出文件：' + output);
          } catch(e) {
            console.log(e);
          }
        } else {
          console.log(content);
        }
        
        phantom.exit();
      }, 1000);
      
    }
  });
}

使用方法： phantomjs img.js URL filename

phantomjs img.js http://sc.chinaz.com/tupian/180514351304.htm imglist.md

其中的JS正則匹配部分能夠單獨提出來，給那些沒有在img標籤上直接寫源地址的頁面工具console使用：

function findImg() {
  var html = document.body.innerHTML;
  var list = [];
  // 匹配圖片（g表示匹配全部結果i表示區分大小寫）
  var imgReg = /<img.*?(?:>|\/>)/gi;
  // 匹配src屬性
  var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
  // 排除base64
  // var base64Reg = ;
  var arr = html.match(imgReg);
  
  for (var i = 0; i < arr.length; i++) {
      var src = arr[i].match(srcReg);
      //獲取圖片地址
      if (src[1]) {
        var img = src[1];
        // base64的不要，本地的圖片不要
        if (!img.match(/data:image\//i) 
          && img.match(/((http|ftp|https):)?\/\/[\w\-_]+/i)
          && list.indexOf(src[1]) == -1
        ) {
          list.push(src[1]);
        }
      }
  }
  return list;
}

(findImg()).join('\n');

Shell腳本代碼

主要實現的是逐行讀文件，使用wget下載圖片，重命名文件。
download.sh:

#!/bin/bash

if [ $# -lt 2 ]; then
  echo "-----Usage------\n sh download.sh filename dirname"
  exit
fi

filename=$1
dirname=$2

if [ ! -d $dirname ]; then
  echo "No such directory: ${dirname}, mkdir..."
  mkdir -p $dirname  
fi

options=$3

nowtime=$(date +%Y%m%d_%H%M%S)
count=0
[ -f $filename ] && {
  cat $filename | while read line
  do

    timestamp=$(date +%Y%m%d_%H%M%S)
    if [ $nowtime = $timestamp ]; then
      ((count=count+1));
    else
      nowtime=$timestamp
      count=0
    fi
    name="${timestamp}_${count}"
    # add filetype
    filetype=${line##*.}
    if [[ ! -z $filetype || ${#filetype} -gt 4 ]]; then
      filetype="jpeg"
    fi
    name="${dirname}/${name}.${filetype}"

    wget -cx $line -O $name
  done
}

腳本給下載的圖片作了重命名，命名規則是 下載時的日期_時間_序號.文件類型
若是沒有文件類型，則默認爲 jpeg

使用方法： sh download.sh filename dirname

sh download.sh imglist.md images

原文地址： http://www.zhuyuwei.cn/2018/s...