How to generate a jpg from an html through a button?

Question

I have an HTML code for email signature from the company I work for and would like to implement a button to generate a JPG or PNG image of that signature so as not to be using PrintScreen and cropping in image editors like Paint or Photoshop .. . How can I do this?

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="C:/Users/Markar/Desktop/Print.js-1.0.61/print.min.css">

</head>


<table class="tg" id="printer">
  <tr>
    <th class="tg-031e"></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"></th>
  </tr>
  <tr>
    <td class="tg-031e" rowspan="6"> <img 
src="M:\Markar\Depto_diretoria\Assinaturas_MK_2016\Assinatura 2019\ASSETS\logo_Markar_oficial.png"width="145">                  </td>
    <td class="tg-031e"><b><FONT COLOR=black SIZE=2>Julxxx Sxxxxxxxom</FONT></b></td>
    <td class="tg-031e" rowspan="6"> <img 
src="M:\Markar\Depto_diretoria\Assinaturas_MK_2016\Assinatura 2019\ASSETS\pqec_2019_Branco.jpg"width="110"></td>
  </tr>
  <tr>
    <td class="tg-031e"><FONT COLOR=gray SIZE=2>Qualidade</FONT></td>
  </tr>
  <tr>
    <td height=40></td>
  </tr>
  <tr>
    <td class="tg-031e"></td>
  </tr>
  <tr>
    <td class="tg-031e"><FONT COLOR=green SIZE=1>Fone(xx) 2xxx-xxxx</FONT></td>
  </tr>
  <tr>
    <td class="tg-031e"><FONT COLOR=blue SIZE=2>www.xxxxxxxxxxx.com.br</FONT></td>
  </tr>
  <tr>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l" width=250><FONT COLOR=blue size=2px>xxxx.xxxxxxxx@xxxxxxxx.com.br</FONT></td>
    <td class="tg-yw4l"></td>
  </tr>
</table>

<button type="button" onclick="printJS({ printable: 'printer', type: 'html' })">
 imprimir
</button>

<script type="text/javascript" src="C:/Users/Markar/Desktop/Print.js-1.0.61/print.min.js"></script>

I would like the generated jpg to incorporate the 2 images inserted in the <img src = "")> tags, the text content and the final html format without distortion

https://stackoverflow.com/questions/10721884/render-html-to-an-image — Webdeveloper_Jelle, Aug 26 '19 at 13:15

score 0 · Answer 1 · answered Aug 26 '19 at 13:31

google-chrome.exe --headless --screenshot --window-size=1366,968 --default-background-color=0 website-url

Sample:

google-chrome.exe --headless --screenshot --window-size=1366,968 --default-background-color=0 https://stackoverflow.com/questions/57658613/how-to-generate-a-jpg-from-an-html-through-a-button

This will produce your current page into screenshot.

headless runs Chrome without opening it and exits after the command completes

screenshot will capture a screenshot and generate screenshot.png in the folder location

window-size allow to only capture a portion of the screen (format is --window-size=width,height)

default-background-color 0 will give transparent background

How to generate a jpg from an html through a button?

1 Answers1