时间戳

首页 > 解决方案 > 如何从 HTML Canvas 捕获帧并将其显示在 Bootstrap 模式上？

javascript - 如何从 HTML Canvas 捕获帧并将其显示在 Bootstrap 模式上？

问题描述

我有一个页面要求网络摄像头/相机许可，然后根据用户的面部位置移动网络表情符号。

底部是一个按钮，如果检测到人脸，该按钮将激活（变为蓝色）。单击此按钮时，我想保存 WebMoji/Canvas 的当前帧并使用 Bootstrap 4 在模态中显示它。

这是我关于这些元素的代码，以及我尝试过的 JS：

<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">Modal title</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>
    //Gets the emoji canvas using its ID
    var canvas = document.getElementById("webojiCanvas");
    var img = canvas.toDataURL("image/jpg");
    var captureButton = document.getElementById("captureFrameBtn");
    var frameContainer = document.getElementById("frameContainer");
    captureButton.addEventListener("click", function() {
        frameContainer.innerHTML = "<img src='" + img + "'>";
    });
</script>

标签： javascripthtmlcsscanvasbootstrap-4

解决方案

我建议不要使用它的.innerHTML属性来操作frameContainer的内容，而是创建一个 HTMLImageElement 的新实例，将它的 .src 属性设置为.toDataURL()调用的结果，并使用.appendChild()将其附加到目标 div .

这是一个例子：

var canvas = document.getElementById("webojiCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();


var captureButton = document.getElementById("captureFrameBtn");
var frameContainer = document.getElementById("frameContainer");

captureButton.addEventListener("click", function() {
  var img = new Image();
  img.id = "theDuplicate";
  img.src = canvas.toDataURL("image/jpg");
  if (document.getElementById(img.id)) {
    document.getElementById(img.id).src = img.src;
  } else {
    frameContainer.appendChild(img);

  }
});
<button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#exampleModal" id="captureFrameBtn">
      Face not detected
</button>

<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">Modal title</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 class="webojiCanvas" id="webojiCanvas" width="200" height="200"></canvas>

推荐阅读