在目录中的每个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分钟才得到这个工作，所以我认为这是最简单的方法。