I will rasterize the following simple html + svg + foreignObject html
<html> <head> <meta charset="UTF-8"> <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
As you can see, the size of one visible element is 1050px x 750px. I would like to rasterize it exactly to a paper size of 10.5 inches x 7.5 inches at a size of 100%.
My rasterization script does:
page.paperSize = width: '10.5in', height: '7.5in', border: '0in'
which is obtained using pdf:
Therefore, it does not scale to full size. I can adjust the full-scale zoom factor setting. experimentally I found that it works
page.zoomFactor = 1.991
Now the element is scaled correctly, but the fonts scale too much.
How to take the left / top 1050px / 750px pages and scale it to 10.5inx7.5in accuracy on paper while maintaining the original font size?
source share