Creating in img file (bmp,jpg,png) from html elements

Question

I have a page that includes a number of canvas elements each with its own shape (rec,line etc...) and also css3 properties (rotate,deg,transform etc...). i need to take that html element or page and render it as an image file including all the child elements and their styling.

• html2canvas.js has a lot of problems rendering css3 properties so that option is off the table.
• and the elements i want to convert to an image are an array of html elements (div,canvas,p,video etc...) so a screenshot of a canvas element want do.

is there a solution for this problem??? i must convert it to an img i dont have any other alternative !!!

Answer 1

You can use PhantomJS for this. Here is an example in node:

var page = require('webpage').create();
page.open('http://example.org/', function() {
    var clipRect = page.evaluate(function () {
        return document.getElementById('myID').getBoundingClientRect();
    });

    page.clipRect = {
        top:    clipRect.top,
        left:   clipRect.left,
        width:  clipRect.width,
        height: clipRect.height
    };

    page.render('myCapture.png');
    phantom.exit();
});

This will go to example.org and take a screenshot of everything inside #myID