convert HTML elements to images (server side)

Question

I'd like to convert dynamic HTML elements to images (jpg, png, ..) , I don't want to get a screenshot of a webpage nor from a static html file.

The purpose is something like this but on the server-side:

var imgs=[]
for (var i = 0; i < templates.length; i++){
     var tempHtml = $(templates[i]).find("#imagePlaceHolder").attr("src", url[i]);
     imgs.push(convert2Image(tempHTML));
}

Ugh? That makes no sense: You're creating an img element, setting its source to an image, then converting the HTML image element back to an image? Why not immediately [`GET` the image](http://stackoverflow.com/questions/11944932/how-to-download-a-file-with-node-js-without-using-third-party-libraries), then push it in your array? — webketje, Feb 05 '16 at 21:44
"_I don't want to get a screenshot of a webpage_", that sounds exactly like what you want to do. — Quill, Feb 05 '16 at 23:36

score 0 · Answer 1 · answered Feb 07 '16 at 22:12

You can use a headless browser PhantomJS and PhantomJS bridge in order to integrate into your application. A bridge between node and PhantomJS.(https://www.npmjs.com/package/phridge)

var webPage = require('webpage');
var page = webPage.create();

page.viewportSize = {
  width: 1920,
  height: 1080
};

page.open('http://youwebsite/yourpage', function (status) {
  var base64 = page.renderBase64('PNG');
  phantom.exit();
  console.log(base64);
});

convert HTML elements to images (server side)

1 Answers1