如何從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>