Поиск координат изображения в каждом файле 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 минут, чтобы заставить это работать, поэтому я считаю, что это самый простой способ.