javascript - jscapture - Phantomjs-captura de pantalla de una página web

screenshot javascript

Question

Tengo una URL (por ejemplo, http://www.example.com/OtterBox-77-24444-Commuter-Series-Optimus/dp/B00A21KPEI/ref=pd_sim_cps_4 ) y quiero tomar una captura de pantalla y verla en mi página web. Es decir, el usuario hace clic en el botón de vista previa y PhantomJS necesita obtener una vista previa de la página web como PNG / JPEG

Estoy bien con el uso de cualquier otro código abierto también.

Answer 1

La respuesta anterior está bien para el uso básico, pero PhantomJS no sabe si todas las solicitudes de AJAX se han cargado o no. Hice url-to-image para ayudar con este problema.

1. npm install url-to-image

2. Escribe screenshot.js

   var screenshot = require(''url-to-image'');
   screenshot(''http://google.com'', ''google.png'').done(function() {
       console.log(''http://google.com screenshot saved to google.png'');
   });

3. Ejecutar script node screenshot.js

Answer 2

Voy a suponer que ha instalado Phantomjs y que ha creado un alias en su .bashrc o que ha actualizado la ruta de su sistema para llamar a los binarios de Phantomjs. Si no es así, debe leer algunos tutoriales para principiantes: http://net.tutsplus.com/tutorials/javascript-ajax/testing-javascript-with-phantomjs/

Una vez que haya configurado esa configuración, deberá escribir un archivo javascript sencillo al que llamará en el terminal (o shell, si está usando Windows). Voy a proporcionar un simple ejemplo de script a continuación.

var WebPage = require(''webpage'');
page = WebPage.create();
page.open(''http://google.com'');
page.onLoadFinished = function() {
   page.render(''googleScreenShot'' + ''.png'');
   phantom.exit();}

Luego, guarde su archivo js. Abre tu terminal o shell y ejecuta lo siguiente

phantomjs yourFile.js

Eso es. Verifique el directorio donde llamó al archivo js y debería tener un archivo png con una captura de pantalla de su página web.

Esto es muy simple y hay muchas advertencias con los Phantomjs, pero es lo más básico que puedo hacer. Si necesita otras recetas para phantomjs, intente ver estos scripts de ejemplo: https://github.com/ariya/phantomjs/wiki/Examples