javascript - missing images when using casperjs to generate pdf from slidify (HTML5) slides -

overview

i trying generate pdf doc r markdown document (using ramnathv's slidify library, , io2012 framework). process described briefly here.

the one-liner provides works perfectly, except don't see images in pdf doc.

however, in example given above links jtleek's repository (available here), appears images included in generated pdfs, successfully.

i not sure if problem lies javascript, or html code generated slidify/r.

replicating problem

the problem can replicated follows :

casperjs makepdf.js http://jburos.github.io/test-slidify-to-pdf/index.html index.pdf 1000 

[ note: in order example work, have have installed casperjs & phantomjs. ]

where contents of makepdf.js are:

var casper = require('casper').create({viewportsize:{width:1500,height:1000}}); var args = casper.cli.args; var imgfile = (args[1] || math.random().tostring(36).slice(2)) casper.start(args[0], function() {   this.wait(args[2], function(){     this.captureselector(imgfile, "slides");   }); });  casper.run(); 

alternatively, can replicate problem cloning git repository,

git clone git@github.com:jburos/test-slidify-to-pdf.git cd test-slidify-to-pdf casperjs makepdf.js  index.pdf 1000 

again, problem index.pdf doc not include images, rendered index.html.

background

i note full process has several steps:

1. use r/slidify/knitr convert
   • .rmd file -> .md file
   • .md file -> .html file
2. use casperjs convert
   • .html file -> .pdf file

alternate methods of generating pdf rmd i've considered include:

1. using pandoc generate beamer pdf: pandoc index.md -t beamer -o index_beamer.pdf
   • yields ! latex error: file ``ifluatex.sty' not found.
2. using chrome browser print index.html pdf
   • yields left-truncated image file, described in above post
3. using pandoc generate pdf md file:
   • yields pdf (not slideshow style) not containing images

many assistance.

thank detailed question. @ first, thought issue reference problem, ran

casperjs makepdf.js index.html index.pdf 3000 --verbose=true --log-level=info 

this gave no useful information, replaced 1 of image srces base64 encoded image. still did not show, knew must javascript or css. indeed, removing except img tag produced correct result. binary search on tags in header (e.g., remove half, , see if images show) narrowed problem down libraries/frameworks/io2012/css/default.css. binary search (removing half file , regenerating pdf each time) narrowed down these 2 lines:

 margin-left: -450px;  margin-top: -350px; 

in css slides > slide (line 246-247 of file). able fix problem adding

<style type="text/css">  slides > slide {    margin-left:0;    margin-top:0;  } </style> 

finally, submitted pull request github repo fix issue.

since auto-generating this, want add intermediate processing step injects css .html file, or--if default.css expected static , not regenerated--just remove 2 margin styles delinquent css file directly.