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 !!!

subZero · Accepted Answer · 2014-02-05 12:05:08Z

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

sorry this needs Microsoft Visual C++ and all kinds off instalation that we cant handle. i need a pure JS or JS library solution to this problem. im trying to do this on the client side.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related