6

I am using selenium/phantomjs to create png files of html in python. Is there a way to generate the png from an html string or filehandle (instead of a website)? I've searched through the selenium docs and googled but couldn't find an answer. I have:

htmlString = '<html><body><div style="background-color:red;height:500px;width:500px;">This is a png</div></body></html>'
myFile = 'tmp.html'
f = open(myFile,'w')
f.write(htmlString) 

from selenium import webdriver  

driver = webdriver.PhantomJS()
driver.set_window_size(1024, 768) 
#driver.get('https://google.com/') # this works fine
driver.get(myFile) # passing the file name or htmlString doesn't work...creates a blank png with nothing
driver.save_screenshot('screen.png') 
driver.quit()

print "png file created"
4
  • Have you tried file:///PathToFile/tmp.html? Aug 5, 2013 at 20:27
  • That also gives me a blank png file. Is that documented anywhere?
    – user776942
    Aug 5, 2013 at 20:47
  • No. I've never used PhantomJS, but the file:/// is what browsers use to go to a file. I didn't escape the line above (and now I can't edit it)...did you make sure its escaped? Aug 5, 2013 at 20:57
  • Does stackoverflow.com/a/11771464/711902 help at all? Aug 5, 2013 at 21:32

4 Answers 4

12

PhantomJS

var page = require('webpage').create();
page.open('http://github.com/', function () {
    page.render('github.png');
    phantom.exit();
});

This is how to get a screenshot in phantomJS, I've used phantomJS for some time now.

You can find more information here.

Selenium

driver = webdriver.Chrome();
driver.get('http://www.google.com');
driver.save_screenshot('out.png');
driver.quit();

Hope this helps.

2
  • You should remove your semicolons from the Selenium (Python) section. Jan 2, 2017 at 21:12
  • You don't have to Aug 9, 2017 at 0:23
4

Pure good old python - set the content on any opened page to your target html - through JS. Taking your example code:

from selenium import webdriver

htmlString = '<html><body><div style="background-color:red;height:500px;width:500px;">This is a png</div></body></html>'

driver = webdriver.PhantomJS() # the normal SE phantomjs binding
driver.set_window_size(1024, 768)
driver.get('https://google.com/') # whatever reachable url
driver.execute_script("document.write('{}');".format(htmlString))  # changing the DOM

driver.save_screenshot('screen.png')   #screen.png is a big red rectangle :)
driver.quit()

print "png file created"
2

PhantomJS

var page = require('webpage').create();
page.content = '<html><body><p>Hello world</p></body></html>';
page.render('name.png');

You set the content of the page using page.content Then you render it using page.render

Example using phantomjs-node

phantom.create(function (ph) {
  ph.createPage(function (page) {
      page.set('viewportSize', {width:1440,height:900})

      //like this
      page.set('content', html);

      page.render(path_to_pdf, function() { 
        //now pdf is written to disk.
        ph.exit();
      });
  });
});
1

It seems the lines

f = open(myFile,'w')
f.write(htmlString) 

Are problematic, as the generated file is empty.

I fixed this issue with

with open(myFile,'wt') as f:
    f.write(htmlString)

or you might have to add a

f.close() to your code

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.