如何从HTML Canvas捕获框架并将其显示在Bootstrap模式下？

Question

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

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

这是我关于这些元素的代码，以及我尝试过的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>

Answer 1

我建议不要使用它的.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>