Render HTML to an image

Question

Is there a way to render html to image like PNG  I know that it is possible with canvas but I would like to render standard html element like div for example

User · Answer

I know this is quite an old question which already has a lot of answers, yet I still spent hours trying to actually do what I wanted:

given an html file, generate a (png) image with transparent background from the command line

Using Chrome headless (version 74.0.3729.157 as of this response), it is actually easy:

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --screenshot --window-size=256,256 --default-background-color=0 button.html

Explanation of the command:

you run Chrome from the command line (here shown for the Mac, but assuming similar on Windows or Linux)
--headless runs Chrome without opening it and exits after the command completes
--screenshot will capture a screenshot (note that it generates a file called screenshot.png in the folder where the command is run)
--window-size allow to only capture a portion of the screen (format is --window-size=width,height)
--default-background-color=0 is the magic trick that tells Chrome to use a transparent background, not the default white color
finally you provide the html file (as a url either local or remote...)

User · Answer

This is what I did  Note  Please check App js for the code  Link to source code If you liked it  you can drop a star    Update  import   as htmlToImage from  html-to-image   import download from  downloadjs    import logo from    logo svg   import    App css    const App        gt      const onButtonClick        gt        var domElement   document getElementById  my-node        htmlToImage toJpeg domElement         then function  dataUrl            console log dataUrl           download dataUrl   image jpeg                    catch function  error            console error  oops  something went wrong    error                    return        lt div className  quot App quot  id  quot my-node quot  gt         lt header className  quot App-header quot  gt           lt img src  logo  className  quot App-logo quot  alt  quot logo quot    gt           lt p gt            Edit  lt code gt src App js lt  code gt  and save to reload           lt  p gt           lt a           className  quot App-link quot            href  quot https   reactjs org quot            target  quot  blank quot            rel  quot noopener noreferrer quot           gt            Learn React          lt  a gt  lt br gt  lt  br gt           lt button onClick  onButtonClick  gt Download as JPEG lt  button gt         lt  header gt       lt  div gt          export default App

User · Answer

HtmlToImage jar will be the simplest way to convert a html into an image   Converting HTML to image using java

User · Answer

The only library that I got to work for Chrome  Firefox and MS Edge was rasterizeHTML  It outputs better quality that HTML2Canvas and is still supported unlike HTML2Canvas   Getting Element and Downloading as PNG  var node  document getElementById  elementId    var canvas   document createElement  canvas    canvas height   node offsetHeight  canvas width   node offsetWidth  var name    test png   rasterizeHTML drawHTML node outerHTML  canvas        then function  renderResult                if  navigator msSaveBlob                    window navigator msSaveBlob canvas msToBlob    name                 else                   const a   document createElement  a                    document body appendChild a                   a style    display  none                   a href   canvas toDataURL                    a download   name                  a click                    document body removeChild a

User · Answer

All the answers here use third party libraries while rendering HTML to an image can be relatively simple in pure Javascript  There is was even an article about it on the canvas section on MDN   The trick is this    create an SVG with a foreignObject node containing your XHTML set the src of an image to the data url of that SVG drawImage onto the canvas set canvas data to target image src    x000D   x000D  const  body    document x000D   x000D  const canvas   document createElement  canvas   x000D  const ctx   canvas getContext  2d   x000D  canvas width   canvas height   100 x000D   x000D  const tempImg   document createElement  img   x000D  tempImg addEventListener  load   onTempImageLoad  x000D  tempImg src    data image svg xml     encodeURIComponent   lt svg xmlns  http   www w3 org 2000 svg  width  100  height  100  gt  lt foreignObject width  100   height  100   gt  lt div xmlns  http   www w3 org 1999 xhtml  gt  lt style gt em color red   lt  style gt  lt em gt I lt  em gt  lick  lt span gt cheese lt  span gt  lt  div gt  lt  foreignObject gt  lt  svg gt    x000D   x000D  const targetImg   document createElement  img   x000D  body appendChild targetImg  x000D   x000D  function onTempImageLoad e   x000D    ctx drawImage e target  0  0  x000D    targetImg src   canvas toDataURL   x000D    x000D   x000D   x000D    Some things to note   The HTML inside the SVG has to be XHTML For security reasons the SVG as data url of an image acts as an isolated CSS scope for the HTML since no external sources can be loaded  So a Google font for instance has to be inlined using a tool like this one  Even when the HTML inside the SVG exceeds the size of the image it wil draw onto the canvas correctly  But the actual height cannot be measured from that image  A fixed height solution will work just fine but dynamic height will require a bit more work  The best is to render the SVG data into an iframe  for isolated CSS scope  and use the resulting size for the canvas

User · Answer

I read the answer by Sjeiti which I found very interesting  where you with just a few plain JavaScript lines can render HTML in an image  We of course have to be aware of the limitations of this method  please read about some of them in his answer   Here I have taken his code a couple of steps further  An SVG-image has in principle infinite resolution  since it is vector graphics  But you might have noticed that the image that Sjeiti s code generated did not have a high resolution  This can be fixed by scaling the SVG-image before transferring it to the canvas-element  which I have done in the last one of the two  runnable  example codes i give below  The other thing I have implemented in that code is the last step  namely saving it as a PNG-file  Just to complete the whole thing  So  I give two runnable snippets of code  The first one demonstrates the infinite resolution of an SVG  Run it and zoom in with your browser to see that the resolution does not diminish as you zoom in  In the snippet that you can run I have used backticks to specify a so called template string with line breaks so that you can more clearly see the HTML that is rendered  But otherwise  if that HTML is within one line  then the code will be very short  like this  const body   document getElementsByTagName  BODY   0   const img   document createElement  img   img src    data image svg xml     encodeURIComponent   lt svg xmlns  quot http   www w3 org 2000 svg quot  width  quot 200 quot  height  quot 200 quot  gt  lt foreignObject width  quot 100  quot  height  quot 100  quot  gt  lt div xmlns  quot http   www w3 org 1999 xhtml quot  style  quot border 1px solid red padding 20px  quot  gt  lt style gt em  color red   test  color blue   lt  style gt What you see here is only an image  nothing else  lt br   gt  lt br   gt  lt em gt I lt  em gt  really like  lt span class  quot test quot  gt cheese  lt  span gt  lt br   gt  lt br   gt Zoom in to check the resolution  lt  div gt  lt  foreignObject gt  lt  svg gt             body appendChild img    Here it comes as a runnable snippet   x000D   x000D  const body   document getElementsByTagName  BODY   0   const img   document createElement  img   img src    data image svg xml     encodeURIComponent      lt svg xmlns  http   www w3 org 2000 svg  width  200  height  200  gt       lt foreignObject width  100   height  100   gt         lt div xmlns  http   www w3 org 1999 xhtml  style  border 1px solid red padding 20px   gt           lt style gt            em               color red                         test               color blue                       lt  style gt          What you see here is only an image  nothing         else  lt br   gt           lt br   gt           lt em gt I lt  em gt  really like  lt span class  test  gt cheese  lt  span gt  lt br   gt           lt br   gt          Zoom in to check the resolution         lt  div gt       lt  foreignObject gt     lt  svg gt      body appendChild img   x000D   x000D   x000D   Zoom in and check the infinite resolution of the SVG  The next runnable  below  is the one that implements the two extra steps which I mentioned above  namely improving resolution by first scaling the SVG  and then the saving as a PNG-image   x000D   x000D  window addEventListener  load   doit  false  var canvas  var ctx  var tempImg  function doit         const body   document getElementsByTagName  BODY   0       const scale   document getElementById  scale   value      let trans   document getElementById  trans   checked    if  trans        trans           else       trans    background-color white            let source              lt div xmlns  http   www w3 org 1999 xhtml  style  border 1px solid red padding 20px   trans   gt               lt style gt                  em                       color red                                     test                       color blue                                 lt  style gt              What you see here is only an image  nothing             else  lt br   gt               lt br   gt               lt em gt I lt  em gt  really like  lt span class  test  gt cheese  lt  span gt  lt br   gt               lt br   gt               lt div style  text-align center   gt                  Scaling                   lt br   gt                    scale  times               lt  div gt           lt  div gt       document getElementById  source   innerHTML   source      canvas   document createElement  canvas        ctx   canvas getContext  2d        canvas width   200 scale      canvas height   200 scale      tempImg   document createElement  img        tempImg src    data image svg xml     encodeURIComponent            lt svg xmlns  http   www w3 org 2000 svg  width    200 scale   height    200 scale   gt               lt foreignObject                  style                       width 200px                      height 200px                      transform scale   scale                                   gt     source                  lt  foreignObject gt           lt  svg gt            function saveAsPng        ctx drawImage tempImg  0  0       var a    document createElement  a        a href   canvas toDataURL  image png        a download    image png       a click      x000D   lt table border  0  gt       lt tr gt           lt td colspan  2  gt              The claims in the HTML-text is only true for the image created when you click the button           lt  td gt       lt  tr gt       lt tr gt           lt td width  250  gt               lt div id  source  style  width 200px height 200px   gt               lt  div gt           lt  td gt           lt td valign  top  gt               lt div gt                   amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp In this example the PNG-image will be squarish even if the HTML here on the left is not exactly squarish  That can be fixed  lt br gt                   amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp To increase the resolution of the image you can change the scaling with this slider                   lt div style  text-align right margin 5px 0px   gt                       lt label style  background-color  FDD border 1px solid  F77 padding 0px 10px   gt  lt input id  trans  type  checkbox  onchange  doit       gt  amp nbsp  amp nbsp Make it transparent lt  label gt                   lt  div gt                   lt span style  white-space nowrap   gt 1 lt input id  scale  type  range  min  1  max  10  step  0 25  value  2  oninput  doit     style  width 150px vertical-align -8px     gt 10 amp nbsp  amp nbsp  lt button onclick  saveAsPng     gt Save as PNG-image lt  button gt  lt  span gt               lt  div gt                        lt  td gt       lt  tr gt   lt  table gt  x000D   x000D   x000D   Try with different scalings  If you for example set scaling to 10  then you get a very good resolution in the generated PNG-image  And I added a little extra feature  a checkbox so that you can make the PNG-image transparent if you like  Notice  The Save-button does not work in Chrome and Edge when this script is run here at Stack Overflow  The reason is this https   www chromestatus com feature 5706745674465280   Therefore I have also put this snippet on https   jsfiddle net 7gozdq5v  where it works for those browsers

User · Answer

Use this code  it will surely work    x000D   x000D   lt script type  text javascript  gt  x000D     document  ready function      x000D    setTimeout function    x000D     downloadImage    x000D      1000  x000D       x000D    x000D   function downloadImage    x000D    html2canvas document querySelector   dvContainer    then canvas   gt    x000D    a   document createElement  a     x000D    document body appendChild a    x000D    a download    test png    x000D    a href    canvas toDataURL    x000D    a click    x000D         x000D     x000D   lt  script gt  x000D   x000D   x000D    Just do not forget to include Html2CanvasJS file in your program  https   html2canvas hertzen com dist html2canvas js

User · Answer

Yes  HTML2Canvas exists to render HTML onto  lt canvas gt   which you can then use as an image    NOTE  There is a known issue  that this will not work with SVG

User · Answer

There is a lot of options and they all have their pro and cons  Option 1  Use an API  ApiFlash  based on chrome  EvoPDF  has an option for html  Grabzit HTML CSS to Image API      Pros  Execute Javascript Near perfect rendering Fast when caching options are correctly used Scale is handled by the APIs Precise timing  viewport      Most of the time they offer a free plan  Cons  Not free if you plan to use them a lot  Option 2  Use one of the many available libraries  dom-to-image wkhtmltoimage  included in the wkhtmltopdf tool  IMGKit  for ruby and based on wkhtmltoimage  imgkit  for python and based on wkhtmltoimage  python-webkit2png      Pros  Conversion is quite fast most of the time  Cons  Bad rendering Does not execute javascript No support for recent web features  FlexBox  Advanced Selectors  Webfonts  Box Sizing  Media Queries       Sometimes not so easy to install Complicated to scale  Option 3  Use PhantomJs and maybe a wrapper library  PhantomJs node-webshot  javascript wrapper library for PhantomJs       Pros  Execute Javascript Quite fast  Cons  Bad rendering No support for recent web features  FlexBox  Advanced Selectors  Webfonts  Box Sizing  Media Queries       Complicated to scale Not so easy to make it work if there is images to be loaded      Option 4  Use Chrome Headless and maybe a wrapper library  Chrome Headless chrome-devtools-protocol Puppeteer  javascript wrapper library for Chrome headless       Pros  Execute Javascript Near perfect rendering  Cons  Not so easy to have exactly the wanted result regarding   page load timing viewport dimensions   Complicated to scale Quite slow and even slower if the html contains external links  Disclosure  I m the founder of ApiFlash  I did my best to provide an honest and useful answer

User · Answer

You can use an HTML to PDF tool like wkhtmltopdf   And then you can use a PDF to image tool like imagemagick  Admittedly this is server side and a very convoluted process

User · Answer

I don t expect this to be the best answer  but it seemed interesting enough to post   Write an app that opens up your favorite browser to the desired HTML document  sizes the window properly  and takes a screen shot   Then  remove the borders of the image

User · Answer

You can t do this 100  accurately with JavaScript alone   There s a Qt Webkit tool out there  and a python version  If you want to do it yourself  I ve had success with Cocoa    self startTraverse pagesArray performBlock   int collectionIndex  int pageIndex         NSString  locale    self selectedLocale        NSRect offscreenRect   NSMakeRect 0 0  0 0  webView frame size width  webView frame size height       NSBitmapImageRep  offscreenRep   nil             offscreenRep     NSBitmapImageRep alloc  initWithBitmapDataPlanes nil                                              pixelsWide offscreenRect size width                                              pixelsHigh offscreenRect size height                                              bitsPerSample 8                                              samplesPerPixel 4                                              hasAlpha YES                                              isPlanar NO                                              colorSpaceName NSCalibratedRGBColorSpace                                              bitmapFormat 0                                              bytesPerRow  4   offscreenRect size width                                               bitsPerPixel 32         NSGraphicsContext saveGraphicsState        NSGraphicsContext  bitmapContext    NSGraphicsContext graphicsContextWithBitmapImageRep offscreenRep        NSGraphicsContext setCurrentContext bitmapContext        webView displayRectIgnoringOpacity offscreenRect inContext bitmapContext        NSGraphicsContext restoreGraphicsState           Create a small   large thumbs     NSImage  smallThumbImage     NSImage alloc  initWithSize thumbSizeSmall         NSImage  largeThumbImage     NSImage alloc  initWithSize thumbSizeLarge         smallThumbImage lockFocus         NSGraphicsContext currentContext  setImageInterpolation NSImageInterpolationHigh          offscreenRep drawInRect CGRectMake 0  0  thumbSizeSmall width  thumbSizeSmall height          NSBitmapImageRep  smallThumbOutput     NSBitmapImageRep alloc  initWithFocusedViewRect CGRectMake 0  0  thumbSizeSmall width  thumbSizeSmall height           smallThumbImage unlockFocus           largeThumbImage lockFocus           NSGraphicsContext currentContext  setImageInterpolation NSImageInterpolationHigh          offscreenRep drawInRect CGRectMake 0  0  thumbSizeLarge width  thumbSizeLarge height          NSBitmapImageRep  largeThumbOutput     NSBitmapImageRep alloc  initWithFocusedViewRect CGRectMake 0  0  thumbSizeLarge width  thumbSizeLarge height           largeThumbImage unlockFocus             Write out small     NSString  writePathSmall    issueProvider imageDestinationPath stringByAppendingPathComponent  NSString stringWithFormat      -collection- 03d-page- 03d small png   locale  collectionIndex  pageIndex        NSData  dataSmall    smallThumbOutput representationUsingType NSPNGFileType properties  nil        dataSmall writeToFile writePathSmall atomically  NO           Write out lage     NSString  writePathLarge    issueProvider imageDestinationPath stringByAppendingPathComponent  NSString stringWithFormat      -collection- 03d-page- 03d large png   locale  collectionIndex  pageIndex        NSData  dataLarge    largeThumbOutput representationUsingType NSPNGFileType properties  nil        dataLarge writeToFile writePathLarge atomically  NO         Hope this helps

User · Answer

Use html2canvas just include plugin and call method to convert HTML to Canvas then download as image PNG          html2canvas document getElementById  image-wrap    then function canvas                var link   document createElement  a                document body appendChild link               link download    manpower efficiency jpg               link href   canvas toDataURL                link target     blank               link click                  Source  http   www freakyjolly com convert-html-document-into-image-jpg-png-from-canvas

User · Answer

You can add reference HtmlRenderer to your project and do the following   string htmlCode    lt p gt This is a sample html  lt  p gt    Image image   HtmlRender RenderToImage htmlCode  new Size 500 300

User · Answer

You could use PhantomJS  which is a headless webkit  the rendering engine in safari and  up until recently  chrome  driver  You can learn how to do screen capture of pages here  Hope that helps

User · Answer

May I recommend dom-to-image library  that was written solely to address this problem  I m the maintainer   Here is how you use it  some more here    var node   document getElementById  my-node     domtoimage toPng node       then  function  dataUrl            var img   new Image            img src   dataUrl          document appendChild img               catch function  error            console error  oops  something went wrong    error

User · Answer

Install phantomjs    npm install phantomjs   Create a file github js with following code  var page   require  webpage   create      viewportSize being the actual size of the headless browser page viewportSize     width  1024  height  768    page open  http   github com    function         page render  github png        phantom exit          Pass the file as argument to phantomjs    phantomjs github js

[javascript] Render HTML to an image

Examples related to javascript

Examples related to html

Examples related to css

Examples related to image

Examples related to render