时间戳

首页 > 解决方案 > 如何通过按钮从 html 生成 jpg？

html - 如何通过按钮从 html 生成 jpg？

问题描述

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

<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 格式而不会失真

标签： html

解决方案

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 将给出透明背景

推荐阅读