У меня есть опция доски во время видеовызова в моем веб-приложении, встроенном в angularjs (1.x). Пользователи могут рисовать над видео в элементе canvas. Мне нужно сделать скриншот текущей позиции видео и рисовать на холсте. Я могу получить видеокадр как URL base64 (второе изображение) и рисунок холста как URL base64 (третье изображение) отдельно. Но мне нужно получить его как объединенное одиночное изображение в URL base64, как и первое изображение.
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;
Я попробовал приведенный выше код и это дает вывод как изображение видеокадра только не включенный рисунок. Я хочу вывод в качестве первого изображения. Пожалуйста, кто-нибудь, помогите мне сделать это.