在目錄中的每個HTML文件中查找圖像的座標？

Question

我有一個帶有類似圖像標籤的平面HTML文件庫。我應該如何瀏覽所有這些文件，並在特定圖像標籤的頁面上找到特定的x，y座標？

我在想，我需要將每個頁面渲染爲圖像（用我可以匹配的特定顏色替換正在查找的圖像標記），或者我可以無頭渲染頁面上有類似phantom.js的東西，並找到這種座標（儘管我不知道這是否可行）。任何想法會更容易？

我寧願使用LAMP堆棧或Node.js.

謝謝！

Answer 1

我認爲使用PhantomJS將是最簡單的。不需要node.js.

你可以結合examples/scandir.js和examples/phantomwebintro.js來得到你想要的。

var system = require('system'); 
var fs = require('fs'); 

if (system.args.length !== 2) { 
    console.log("Usage: phantomjs scandir.js DIRECTORY_TO_SCAN"); 
    phantom.exit(1); 
} 

function scanDirectory(path, cb) { 
    if (fs.exists(path) && fs.isFile(path)) { 
     cb(path); 
    } else if (fs.isDirectory(path)) { 
     fs.list(path).forEach(function (e) { 
      if (e !== "." && e !== "..") { 
       scanDirectory(path + '/' + e, cb); 
      } 
     }); 
    } 
} 

function parsePage(path) { 
    var page = require('webpage').create(); 
    page.open(path, function(status) { 
     if (status === "success") { 
      page.includeJs("http://code.jquery.com/jquery-latest.js", function() { 
       var images = page.evaluate(function() { 
        var images = []; 
        $('img').each(function() { 
         images.push({ src: $(this).attr('src'), pos: $(this).position() }); 
        }); 
        return images; 
       }); 
       console.log(images); 
      }); 
     } 
    }); 
} 

scanDirectory(system.args[1], parsePage); 

這個腳本（phantomjs img.js kittens）將掃描文件的目錄，加載該目錄中的所有文件（和子目錄，你可以修改scanDirectory這種行爲），並發現該網頁上的所有<img>標籤，並返回一個數組他們的src屬性和.position()。

花了我大約20分鐘纔得到這個工作，所以我認爲這是最簡單的方法。