如何使用HTML和jQuery实现HTML元素转Canvas并生成Base64图片

你的代码存在几个明确的问题，修复后即可正常运行：

• 未引入Font Awesome的样式资源，图标字体无法加载，自然无法渲染到Canvas中
• 读取到的unicode值没有赋值给#testando元素，转换的目标元素是空内容，得到的Base64自然是空白
• Font Awesome 5 Free的实心图标需要配合font-weight: 900才能正常显示，你的样式里没有加这个配置
• HTML结构不符合规范，<p>标签内不能嵌套块级元素<h3>，可能导致DOM渲染异常
• 未保证字体加载完成就执行html2canvas渲染，容易出现字体还没加载完就渲染，导致图标显示为方块的问题

修改后的完整代码 #

HTML部分

<!-- 新增Font Awesome 5 CSS引入 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js" integrity="sha512-tVYBzEItJit9HXaWTPo8vveXlkK62LbA+wez9IgzjTmFNLMBO1BEYladBw2wnM3YURZSMUyhayPCoLtjGh84NQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- 修正无效的DOM结构，去掉外层p标签 -->
<h3 id="testando"></h3>
<!-- 补充你缺失的表单元素 -->
<input type="text" id="uunicode" placeholder="输入FA图标unicode，比如f007">
<input type="color" id="ccor" value="#ff0000">
<input type="text" id="ctamanho" placeholder="输入字体大小，比如60px" value="60px">
<button id="enviar">生成</button>

JS部分

$(document).ready(function() {
  // 预加载Font Awesome字体，避免渲染时字体未加载
  document.fonts.load('900 1em "Font Awesome 5 Free"').then(() => {
    $("#enviar").click(function() {
      var unicode = $('#uunicode').val();
      var fonte = "Font Awesome 5 Free";
      var cor = $('#ccor').val();
      var tamanho = $('#ctamanho').val();
      // 给h3赋值内容，unicode转成实体字符
      $("#testando").html(`&#x${unicode};`);
      // 补全font-family和font-weight配置
      $("#testando").css({
        "color": cor,
        "font-size": tamanho,
        "font-family": fonte,
        "font-weight": 900
      });
      
      html2canvas(document.getElementById("testando"), {
        allowTaint: true,
        useCORS: true,
        // 加短延迟确保样式渲染完成
        delay: 100
      }).then(function(canvas) {
        var base64 = canvas.toDataURL();
        alert(base64);
      });
    });
  })
});

测试时直接输入Font Awesome图标的unicode编码即可，比如用户图标编码为f007，输入后点击生成就能得到包含图标的Base64地址。

内容的提问来源于stack exchange，提问作者Lucas Mateus