Снимки HTML-страниц затем преобразуются в изображение с помощью node.js и phantom

Question

Я пытаюсь создать снимок изображения моего сайта, используя node-weshot, который зависит от phantomjs. Он работает, как ожидалось, на моей локальной машине, но когда я развертываю его на реальном сервере. Он просто запускает обратный вызов, говоря, что изображение генерируется. Но под этим процессом все еще создается изображение. (i.e) Имя файла сгенерировано, но оно не имеет размера и содержимого. Через 10 минут файл будет заполнен данными изображения. Однако шрифты не отображались правильно.

вот скриншот:

и Heres мой WebShot код:

var options = { 
    screenSize: { 
    width: 403, 
    height: 403 
    }, 
    shotSize: { 
    width: 403, 
    height: 403 
    }, 
    script: function() { 
    $(function() { 
     window.callPhantom('takeShot'); 
    }); 
    }, 
    takeShotOnCallback: true 
}; 

webshot(baseUrl+frame_url, path, options, function(err) { 
    if(err){ 
     return res.json({ok:false, error:err.error || err}); 
    } 
    return res.json({image:baseUrl+img,ok:true}); 
    }); 

Технически у меня есть 2 проблемы здесь:

1. WebShot возвращает функцию обратного вызова, даже несмотря на то, формирования изображения еще не закончена.
2. Сгенерированное изображение не отображает шрифты правильно. (Я использую Google шрифты здесь).

Есть ли какие-либо проблемы? Я вижу, что это связано с How do you take a screenshot of an angularjs app?

Или есть ли какие-либо хорошие альтернативы узлу-webshot и phantomjs?

Answer 1

Я довольно новичок в веб-снимке и фантоме, но, похоже, вы предоставляете анонимную функцию там, которая будет выполняться как можно скорее БЕСПЛАТНО, генерируются ли ваши изображения или нет. Если вы хотите ждать, пока все изображения для загрузки перед вызовом window.callPhantom, вы можете попробовать что-то вроде

script: function() { 
    window.onload = function() { 
     if (window.callPhantom === 'function') { 
      window.callPhantom('takeShot'); 
     } 
    }; 
}, 

window.onload будет вызываться только один раз были загружены все активы на этой странице. Вероятно, он отлично работал на вашей локальной машине, потому что активы загружались намного быстрее, прежде чем вызывалась анонимная функция.

EDIT: Я пробовал это (и другие подобные вещи) сам: он НЕ РАБОТАЕТ. Я также попытался поставить код callPhantom на стороне клиента:

<script> 
    window.onload = function() { 
     if (typeof(window.callPhantom) === 'function') { 
      window.callPhantom('takeShot'); 
     } 
    }; 
</script> 

также не работает (это не нарушает страницу, хотя).

Я сохраню это и опубликую свои результаты здесь, даже если я в конечном итоге откажусь от webshot все вместе.

EDIT: Итак, две вещи - во-первых, перечитав вопрос, это связано скорее с шрифтами, а не с изображениями (что означает, вероятно, дубликат Some issues capturing web page image with, node-webshot). Во-вторых, выясняется причина, почему моя установка в Интернете не работала из-за времени привязки, но проблемы с SSL на фантомном уровне (PhantomJS failing to open HTTPS site).

Я чувствую, что последние несколько дней лаял неправильное дерево, но мне хорошо, наконец, добраться до сути. Один урок (среди многих), который я узнал в этом испытании, заключается в том, что любые проблемы, с которыми вы сталкиваетесь при использовании веб-снимка, могут быть на уровне фантома. Ниже приведен код, который я использовал для просмотра сетевых действий phantom (изменил пример pizza из модуля). Просто скопируйте его в файл js и запустите его с помощью фантома (> phantom test.js)

var page = require('webpage').create(), 
    url = 'http://some.url.you.want.to.test'; 

page.onResourceRequested = function(request) { 
    console.log('Request ' + JSON.stringify(request, undefined, 4)); 
}; 
page.onResourceReceived = function(response) { 
    console.log('Receive ' + JSON.stringify(response, undefined, 4)); 
}; 
page.onResourceError = function(resourceError) { 
    console.log('Unable to load resource (#' + resourceError.id + 'URL:' + resourceError.url + ')'); 
    console.log('Error code: ' + resourceError.errorCode + '. Description: ' + resourceError.errorString); 
}; 
page.open(url, function (status) { 
    if (status !== 'success') { 
     console.log('Unable to access network'); 
    } else { 
     console.log(status); 
    } 
    phantom.exit(); 
});