如何捕获WebMoji的Canvas帧并在Bootstrap模态框中显示？

我看了你的代码，发现核心问题是获取Canvas内容的时机不对——你现在是在页面加载时就把Canvas的初始状态存到img变量里了，而不是在点击按钮的那一刻去捕获当前帧。所以不管你什么时候点按钮，显示的都是页面刚加载时的Canvas画面，不是实时的WebMoji状态。

下面是修正后的完整代码，我会把关键改动标出来：

<button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#exampleModal" id="captureFrameBtn" disabled>Face not detected</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Captured WebMoji Frame</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" role="button">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="frameContainer"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- CANVAS WITH THE USER FACE : -->
<canvas class="jeefacetransferCanvas" id="jeefacetransferCanvas"></canvas>
<!-- CANVAS WITH THE WEBOJI : -->
<canvas class="webojiCanvas" id="webojiCanvas" width="600" height="600"></canvas>

<script>
// 获取元素
var canvas = document.getElementById("webojiCanvas");
var captureButton = document.getElementById("captureFrameBtn");
var frameContainer = document.getElementById("frameContainer");

captureButton.addEventListener("click", function() {
  // ✅ 关键改动：点击时才获取当前Canvas的实时内容
  var imgData = canvas.toDataURL("image/jpeg");
  
  // 清空容器（避免重复添加图片）
  frameContainer.innerHTML = "";
  
  // 创建img元素并添加到模态框（比直接innerHTML更稳妥）
  var imgElement = document.createElement("img");
  imgElement.src = imgData;
  imgElement.style.maxWidth = "100%"; // 确保图片适配模态框宽度
  frameContainer.appendChild(imgElement);
});
</script>

额外优化建议： #

• 当检测到人脸激活按钮时，记得把按钮的样式从btn-danger改成btn-primary，同时更新按钮文本，比如改成"Capture Frame"，这样用户体验更好：

  // 假设你有检测人脸的逻辑，当检测到人脸时执行：
  captureButton.disabled = false;
  captureButton.classList.remove("btn-danger");
  captureButton.classList.add("btn-primary");
  captureButton.textContent = "Capture Frame";
  

• 如果Canvas绘制的是透明背景，image/jpeg会把透明区域转成黑色，你可以改用image/png格式来保留透明效果：

  var imgData = canvas.toDataURL("image/png");
  

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