Phantomjs zoomFactor - 将光栅化缩放到特定大小答案

【问题标题】：Phantomjs zoomFactor - scale rasterization to a specific sizePhantomjs zoomFactor - 将光栅化缩放到特定大小
【发布时间】：2014-09-22 03:05:20
【问题描述】：

我正在栅格化以下简单的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>

使用这个简单的光栅化脚本：

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

如您所见，单个可见元素的大小为 1050 像素 x 750 像素。我想以 100% 的尺寸将它精确地光栅化到 10.5 英寸 x 7.5 英寸的纸张尺寸上。

我的光栅化脚本可以：

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

结果是这样的 pdf：

所以这不会扩展到全尺寸。我可以通过调整缩放系数来调整到全尺寸。通过实验我发现这是可行的

page.zoomFactor = 1.991

现在元素可以正常缩放，但字体放大太多了。

如何在保持原始字体大小的同时将页面的左侧/最上方 1050 像素/750 像素缩放到纸上的 10.5 英寸 x 7.5 英寸？

【问题讨论】：

你有什么发现吗？我还以平台之间不同的奇怪比例因子结束。确实很烦人。直接缩放 paperSize 而不是 zoomFactor 时，我得到了更好的结果。
不，我试图联系开发人员，但我会再试一次。
目前提供的 PhantomJS 二进制文件也存在一些严重问题。我们刚刚克隆了 repo 并在 Linux 机器 (Gentoo) 上构建了 Phantom，这需要一段时间，但除此之外运行没有任何问题。此外，我们有一个 Beta 2.0 版本，它解决了所有我们的问题。所以我建议你试试这个。
谢谢@vanthome 我已经有人建议了。不幸的是，为 Windows 构建它的前景非常可怕（我对 c 经验非常缺乏）并且运行带外版本更可怕。在这一点上，我会解释导致问题的原因和限制是什么，所以我可以建议我们的用户避免什么。
对此的更新 - 我已经尝试了 phantom 2.0 和 while the problems are different 仍然存在问题，但幻影团队仍然没有回应

标签： pdf svg phantomjs rasterizing

【解决方案1】：

您是否已经尝试过在 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>

【讨论】：

我很欣赏这个想法。不幸的是，你可以用媒体查询做各种各样的事情，这对 zoomFactor 没有真正的帮助，这似乎对 png 和 pdf 光栅化产生不同的影响