2

Is there a php script that allow to convert a html code to a png image. The problem with GD library is that only convert text to image( and not html code )

mohamed
  • 173
  • 2
  • 2
  • 14
  • Could you explain more? html *is* text. – BeetleJuice Aug 10 '16 at 13:40
  • 1
    @BeetleJuice I believe that he wants to take HTML, render it, and then save the rendered HTML as a png image. – kainaw Aug 10 '16 at 13:41
  • Did you check https://stackoverflow.com/questions/2651173/rendering-html-to-png-server-side ? – sdabet Aug 10 '16 at 13:43
  • 1
    I think you might be better converting to PDF using something like http://wkhtmltopdf.org/ then you may have a better chance of converting PDF to an image. – SheppardDigital Aug 10 '16 at 13:43
  • http://wkhtmltopdf.org/ this can convert HTML to PDF and Image both. – Alok Patel Aug 10 '16 at 13:44
  • 2
    @BeetleJuice A better example is ''. In text form, you see letters. In rendered form, you see a picture. I doubt he wants to see the text. He wants to see the image. Basically, he wants to automate a screen shot of a web page. He is likely making a web page thumbnail program. – kainaw Aug 10 '16 at 13:46
  • @SheppardDigital If I convert to PDF , the convert PDF to PNG , the image will not be transparent – mohamed Aug 11 '16 at 14:04
  • @BeetleJuice I want to rendrer the HTML with php(because I have inline css and call of font ) then convert it to transparent PNG – mohamed Aug 11 '16 at 14:06

1 Answers1

8

There is no pure PHP solution to this.

Basically you've got two options:

  1. Client-side rendering
    Use something like html2canvas to render your image using javascript in the browser.
  2. Server-side rendering
    Use a library like wkhtmltopdf which can be invoked by PHP to generate the image.
    Another server-side solution would be using Phantom.js which can also run javascript before capturing the screen.
Anticom
  • 975
  • 13
  • 29
  • Client side rendering via html2canvas may face CORS issues which may prevent you from capturing images. – dev7 Jul 14 '19 at 12:24
  • There's a new solution available: https://developers.google.com/web/updates/2017/04/headless-chrome#screenshots Will update my answer soon. – Anticom Jul 16 '19 at 15:00