Phantom JS + Docker: html font-family is not respected when converting from HTML

问题

When I run my phantomjs app in docker, in Node, it works fine (converting HTML to Jpeg).
However, when I publish it to a docker container, the font names are no longer being respected.

This app converts HTML into jpeg, pdf or other media, using html-convert npm, which is a wrapper for phantomjs

dockerfile:

FROM node:latest
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
CMD node app.js
EXPOSE 8081

package.json

{
  "name": "htmlconverter",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "body-parser": "^1.18.2",
    "ent": "^2.2.0",
    "express": "^4.16.3",
    "generator-azuresfcontainer": "^1.0.0",
    "html-convert": "^2.1.7",
    "html-entities": "^1.2.1",
    "memorystream": "^0.3.1",
    "phantomjs": "*",
    "phantomjs-prebuilt": "*",
    "picture-tube": "^1.0.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": ""
}

app.js

var http = require("http");
var express = require('express');
var htmlConvert = require('html-convert');
var url = require('url');
var querystring = require('querystring');
var Readable = require('stream').Readable;
var bodyParser = require('body-parser');

var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/', function (req, res) {
    var html = unescape(req.body.html);
    var format = req.body.format;
    var orientation = req.body.orientation;
    var convert = htmlConvert({
        format: format,
        orientation: orientation
    });
    var s = new Readable();
    s._read = function noop() { };
    s.push(html);
    s.push(null);
    var result = s.pipe(convert());
    result.pipe(res);
});

var server = app.listen(8081, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log("Example app listening at http://%s:%s", host, port);
});

Postman (generate jpeg from html):

http://127.0.0.1:8081/

{
    "html": "<!DOCTYPE html><html><head><style>body {background-color: powderblue; font-family: 'Comic Sans MS';}h1   {color: blue;}p    {color: red;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>",
    "format":"jpeg",
    "orientation":"Landscape"
}

Observe the "Comic Sans" font working when calling POST, after launching "node app.js"

Then run Docker, and observe default font being used:

docker build -t htmlconverter .
docker run -p 8081:8081 htmlconverter

I am running this in Windows 10

Any ideas?

回答1:

That font is not in the node:latest image. You need to install MS font family first. I wasn't able to put together working Dockerfile, but these commands should work

wget http://ftp.de.debian.org/debian/pool/contrib/m/msttcorefonts/ttf-mscorefonts-installer_3.6_all.deb
dpkg -i ttf-mscorefonts-installer_3.6_all.deb
apt-get install -f -y

The second command throws error, which causes failing docker image build. Well if you find a way to ignore this error, you should be able to include the commands in the Dockerfile a and build it with MS fonts.

回答2:

This is how I got my app working with Puppeteer.
Note: I switched to Chrome Headless, since PhantomJS is a dinosaur with shady Lic agreement, without decent support

FROM node:latest

# See https://crbug.com/795759
RUN apt-get update && apt-get install -yq libgconf-2-4

# Install latest chrome dev package and fonts to support major charsets (Chinese, Japanese, Arabic, Hebrew, Thai and a few others)
# Note: this installs the necessary libs to make the bundled version of Chromium that Puppeteer
# installs, work.
RUN apt-get update && apt-get install -y wget --no-install-recommends \
    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
    && apt-get update \
    && apt-get install -y google-chrome-unstable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst ttf-freefont \
      --no-install-recommends \
    && rm -rf /var/lib/apt/lists/* \
    && apt-get purge --auto-remove -y curl \
    && rm -rf /src/*.deb

RUN echo "deb http://httpredir.debian.org/debian jessie main contrib" > /etc/apt/sources.list \
   && echo "deb http://security.debian.org/ jessie/updates main contrib" >> /etc/apt/sources.list \
    && echo "ttf-mscorefonts-installer msttcorefonts/accepted-mscorefonts-eula select true" | debconf-set-selections \
    && apt-get update \
    && apt-get install -y ttf-mscorefonts-installer \
    && apt-get clean \
    && apt-get autoremove -y \
    && rm -rf /var/lib/apt/lists/*

WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
CMD ["node", "app.js" ]
EXPOSE 8081

来源：https://stackoverflow.com/questions/50647872/phantom-js-docker-html-font-family-is-not-respected-when-converting-from-html

标签

node.js

Docker

phantomjs