HTMLs/文字图片模板化生成.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文字图片模板化生成</title>
  <meta name="description" content="模板化生成文本图片">
  <style>
  .drawn-image { position: relative; display: inline-block; }
  .rendering-png { display: block !important; }
  .rect-overflow { overflow-wrap: break-word; overflow: auto; }
  #images { display: grid; }
  </style>
</head>

<body>
  <details id="box-settings" style="border: 1px solid yellowgreen">
    <summary>生成配置……</summary>
    <div>选择图片：<input id="img-file" type="file"></input> 或 <input id="img-url" placeholder="http://xxx.png"></input>
      <br>加载字体：<input id="font-name" placeholder="某字体族名"></input> 加 <input id="font-file" type="file"></input> 或 <input id="font-url" placeholder="http://xxx.woff"></input> </div>
    <div>
      <br>文字起点表：<input id="points" placeholder="(x,y) (x1,y1)"></input>
      字体(族:字号,字重,color=颜色,writing-mode=方向)表：<input id="fonts" placeholder="(Arial:20,bold,color=green,writing-mode=horizontal-tb)"></input>
      <br>文字元组列表：<textarea id="source-table" placeholder="Apple--An apple a day, ...--
Banana--A banana a day, ...
==
Human--WTF?--
Monkey--Yeee! Yeee!
  "></textarea>
    </div>
    <a id="cfg-link">分享配置链接</a>(只有图片/字体链接才能被<abbr title="如果内容过长，source-table-url 参数允许自动加载外部文本；此外 eval 参数允许执行脚本，mode=rect 参数允许限制化(x,y)(w,h)">自动下载</abbr>)
  </details>

  <div id="images"></div>
  图片下载<input id="imageset-name" placeholder="下载名前缀" value="render"></input>：
  <ul id="image-downloads"></ul>
</body>

<script src="文字图片模板化生成.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js" integrity="sha256-FPJJt8nA+xL4RU6/gsriA8p8xAeLGatoyTjldvQKGdE=" crossorigin="anonymous"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js" integrity="sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=" crossorigin="anonymous"></script>

</html>