5

I am rasterizing the following simple html+svg+foreignObject html

<html>
<head>
  <meta charset="UTF-8">
  <!--reset stylesheet -->
  <link rel="stylesheet" type="text/css" href="https://phantomjs.googlecode.com/git-history/cbdd80e98ea1eb29d5d3a9c65c84798b472b59b1/website/reset.css" />
  <style>
  p {
    border: 1px solid red;
    font-size: 15px !important;
  }
  svg {
    outline: 1px solid purple;
  }
  </style>
</head>
<body style="height: 1050px; width: 1050px; max-width: 1050px; max-height: 750px;">
    
<svg style="width: 1050px; height: 750px;">
  <foreignobject height="40" requiredfeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" width="45" x="45" y="45">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <p>Oh when the sun begins to shine.</p>
    </body>
  </foreignobject>
</svg>
</body>
</html>

using this simple rasterization script:

webPage = require 'webpage' 
args    = (require 'system').args        
url = args[1]
destination = args[2]

page  = webPage.create()

page.paperSize = width: '10.5in', height: '7.5in', border: '0in'
#page.zoomFactor = 1.991
#page.viewportSize = (width: 1050, height: 75)

page.open url, (status) ->
  if status isnt 'success'
    console.log "Error!", url, status
    return phantom.exit()

  rasterize = -> 
    page.render destination
    console.log "Rasterized", url, "to", destination
    return phantom.exit()
  setTimeout rasterize, 100

Chrome displaying svg

As you can see, the sizing of the single visible element is 1050px x 750px. I would like to rasterize this exactly onto a 10.5in x 7.5in paper size at 100% the size.

My rasterization script does:

page.paperSize = width: '10.5in', height: '7.5in', border: '0in'

which turns out with a pdf like this:

Improperly scaled

So that doesn't scale to full-size. I can adjust to full-size by adjusting the zoom factor. experimentally I've found that this works

page.zoomFactor = 1.991

Properly scaled, font poorly sized

Now the element scales properly but the fonts are scaled up too much.

How do I take the left/topmost 1050px/750px of the page ans scale it to exactly 10.5inx7.5in on paper while maintaining the original font size?

5
  • Have you found out anything? I also end with strange scale factors that vary between platforms. Very annoying indeed. I get better result when scaling paperSize directly and not the zoomFactor. Oct 15, 2014 at 8:24
  • No, I tried to reach out to the developers but I will try again. Oct 15, 2014 at 14:41
  • 1
    We had some serious problems with the currently offered PhantomJS binaries as well. We just cloned the repo and built Phantom on a Linux machine (Gentoo) which took a while but apart from that ran without any problems. Afther that we had a Beta 2.0 build which solved all our problems. So I recommend you to try this.
    – vanthome
    Jan 23, 2015 at 18:29
  • Thanks @vanthome I've had someone suggest that already. Unfortunately, the prospect of building it for windows is pretty scary (I'm pretty short on c experience) and running an out-of-band version is scarier still. At this point I would settle for an explanation of what causes the issue and what the limitations are, so I can just counsel our users on what to avoid. Jan 23, 2015 at 21:19
  • An update on this - I've tried phantom 2.0 and while the problems are different there are still problems and still no response from the phantom team Mar 23, 2015 at 19:52

1 Answer 1

0

Have you already tried with media queries on css?

webPage = require 'webpage'
args = (require 'system').args
url = args[1]
destination = args[2]

page = webPage.create()

page.paperSize = width: '10.5in', height: '7.5in', border: '0in'#
page.zoomFactor = 1.991# page.viewportSize = (width: 1050, height: 75)

page.open url, (status) - >
  if status isnt 'success'
console.log "Error!", url, status
return phantom.exit()

rasterize = - >
  page.render destination
console.log "Rasterized", url, "to", destination
return phantom.exit()
setTimeout rasterize, 100
@media print {
  body {
    margin: 0;
    background-image: none;
    height: 10.5in;
    width: 7.5in;
  }
}
p {
  border: 1px solid red;
  font-size: 8pt !important;
}
svg {
  outline: 1px solid purple;
}
<link rel="stylesheet" type="text/css" href="https://phantomjs.googlecode.com/git-history/cbdd80e98ea1eb29d5d3a9c65c84798b472b59b1/website/reset.css" />

<body style="height: 1050px; width: 1050px; max-width: 1050px; max-height: 750px;">

  <svg style="width: 1050px; height: 750px;">
    <foreignobject height="40" requiredfeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" width="45" x="45" y="45">

      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>Oh when the sun begins to shine.</p>
      </body>
    </foreignobject>
  </svg>
</body>

1
  • I appreciate the idea. You can do all sorts of stuff with media queries unfortunately that doesn't really help with zoomFactor which seems to affect png and pdf rasterization differently Mar 23, 2015 at 19:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.