HTMLs/YounthLearn.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8"/>
  <title>多字模板图生成</title>
  <meta name="description" content="用单张图片和文字（位置、色彩、字号）生成图片，附赠大学『青年大学习』便利性"/>
  <script src="qndxx.js"></script>
  <style>.vp-delete:before { content: "⌫"; }</style>
</head>

<body>
  <label>背景图片</label><input id="file-img" type="file" accept="image/*"/>
  <div><!-- 2 backend helper node -->
    <img id="img-loaded" alt="" hidden></img>
    <canvas id="paint" style="display:none"></canvas>
  </div>
  <div>
    <img id="img-out" alt="Output"></img><br>
    <button id="do-append">++</button>
    <ul id="list-config">
      <li class="persist-cfg"><textarea id="text" placeholder="在此输入文字内容……"></textarea>
      <label>X</label><input id="text-x" type="range"/>
      <label>Y</label><input id="text-y" type="range"/>
      <label>色彩</label><input id="text-color" value="black"/>
      <label>字号</label><input id="text-size" type="number" value="80"/></li>
    </ul>
  </div>
<script>helem("do-append").onclick = function(ev) { vp.appendOneTo(ev.target.nextElementSibling); };</script>
<br>
<section>
<a href="https://dxx.wwwtop.top/">青年大学习完成图—某工具站</a><br>
不要问！问就是雷锋，不谢！😗<br>
<p>
<a href="https://mp.weixin.qq.com/s/dY95ABd9ohBHK9XWZ-iDSQ">共产党青年团团中央关于青年大学习团建之强制性的要求</a>
<blockquote><pre>
<span style="color:green"><u><b>“青年大学习”网上团课不强求普通青年参与。</b></u></span>即使是对于共青团员，各级团组织也应当采用倡导和动员的方法，而<b>不可以强行摊派。</b>
什么算强行摊派呢？比如，在考核中对下级团组织搞所谓的“一票否决”；
比如，对于搞得不好的下级团干部，要求写检查；
比如，要求参加学习的共青团员实名留言；<span style="color:red">再比如，要求参加学习的共青团员<s>截图上报</s></span>，等等。
<span style="color:red"><b>这些方法都是<b>不可取</b>的。</b></span>
</pre></blockquote>
</p>
</section>

<label>批量处理</label><input type="file" accept="image/*" multiple="yes"/>
<script>[].slice.call(document.getElementsByTagName("LABEL")).forEach(function(e) { e.textContent += "："; e.setAttribute("for", e.nextElementSibling.id); });</script>
</body>
</html>