如何通过按钮从 html 生成 jpg？ [复制]答案

【问题标题】：How to generate a jpg from an html through a button? [duplicate]如何通过按钮从 html 生成 jpg？ [复制]
【发布时间】：2019-12-30 16:28:54
【问题描述】：

我有一个来自我工作的公司的电子邮件签名 HTML 代码，并希望实现一个按钮来生成该签名的 JPG 或 PNG 图像，以免在 Paint 或 Photoshop 等图像编辑器中使用 PrintScreen 和裁剪...我该怎么做？

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

我希望生成的 jpg 包含插入在<img src = "")> 标签中的 2 张图片、文本内容和最终的 html 格式而不失真

【问题讨论】：

stackoverflow.com/questions/10721884/render-html-to-an-image

标签： html

【解决方案1】：

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

示例：

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

这会将您当前的页面生成屏幕截图。

headless 运行 Chrome 而不打开它并在命令完成后退出

screenshot 将截取屏幕截图并在文件夹位置生成screenshot.png

window-size 只允许捕获屏幕的一部分（格式为 --window-size=width,height）

default-background-color 0 将提供透明背景

【讨论】：