HTML to PNG Server Side in Node.js

Question

I am looking for a library to take a PNG, place it alongside some HTML and then re-render it as a PNG.

Example code:

var renderingTool = require('renderingTool');
var newPng = renderingTool.pngoutBuffer('' +
    '<div style="border-left: 12px solid red">' +
    '<img src="src="data:image/png;base64,iVBORw0KGgoAAA..." />' +
    '</div>'
);

This would take a PNG image, add a red border on the left and re-render it as a PNG.

I am aware of Phantom.js and gm (which uses GraphicsMagick). I couldn't figure out how to do this with Phantom and with GM it is very slow even for 16px x 16px image (250ms per image). I am hoping to get down to ~10ms to do this.

EDIT:

NOTE: I edited the code above to show the original image is already in memory as a buffer (in the above I converted it to base64).

Also, can phantom be given HTML CODE instead of a URL? All the examples I have seen are with a URL, but giving actual code would be much better.

Answer 1

I'm pretty sure phantomJS is the best available approach for this, broady speaking.

I am hoping to get down to ~10ms to do this.

I believe this to be unachievable given the latency for phantomJS to even download the remote image will exceed 10ms by at least 1 order of magnitude (~250ms for a pretty fast and nearby server) and as much as 3 orders of magnitude for a slow/far away server. Keep in mind there's a minimum latency for network requests due to the speed of light.

If you just want to add a border or do simpler manipulations like crop, rotate, add text, etc, then gm is all you need and that will be much faster than phantomJS, but your bottleneck is still likely to be actually downloading a remote image from the web. If you already have the image file locally on the server's filesystem, then just doing a gm modification you may have a shot of getting in the ballpark of your latency hopes.