覆蓋兩個base64圖像url並在Javascript中將它們保存為單個圖像

Question

我在 angularjs (1.x) 內置的 Web 應用程序中進行視頻通話時有一個白板選項。 用戶可以在畫布元素中的視頻上方繪制。 我需要截取當前視頻位置的屏幕截圖並在畫布上繪圖。 我能夠分別將視頻幀作為 base64 URL（第二張圖像）和畫布繪圖作為 base64 URL（第三張圖像）。 但我需要像第一張圖片一樣將它作為 base64 URL 中的組合單個圖像。

HTML

<img id="img1">
<img id="img2">
<canvas id="mergedImage" width="382" height="510"></canvas>

JS

var drawingImg1 = document.getElementById('img1');
drawingImg1.setAttribute('src', img1);
var drawingImg2 = document.getElementById('img2');
drawingImg2.setAttribute('src', img2);

var c = document.getElementById('mergedImage');
var width = 382;
var height = 510;
var ctx = c.getContext("2d");
var imageObj2 = new Image();
imageObj2.onload = function (){
    ctx.drawImage(imageObj2, 0, 0, width, height);
    var imageObj1 = new Image();
    imageObj1.onload = function (){
        imageObj1.style.objectFit = "cover";
        ctx.drawImage(imageObj1, 0, 0,width, height);
    };
    imageObj1.src = img2;
};
imageObj2.src = img1;

我嘗試了上面的代碼，它僅將輸出作為視頻幀圖像而不包含繪圖。 我想要輸出作為第一張圖像。 請有人指導我這樣做。

• 我在這里創建了一個 jsfiddle

Answer 1

以下解決方案對我有用，可以重疊 2 個圖像並在畫布中獲得單個圖像。 關聯