Как записать два элемента видео холста в один новый холст - PullRequest
0 голосов
/ 09 января 2019

У меня есть 3 элемента canvas, на которых работает видео, и я хочу добавить эти два элемента canvas к третьему элементу canvas вместе. Мой код здесь. Пожалуйста, кто-нибудь поможет мне за то же самое

Пожалуйста, взгляните на следующий код и помогите мне.

Первый холст

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

Второй холст

var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');

var cw = 200;
var ch = 200;
canvas.width = cw;
canvas.height = ch;
canvas2.width = cw;
canvas2.height = ch;

Видео на холсте

v.addEventListener('play', function(){
    draw(this,context,cw,ch);
},false);

Третий холст

var can3 = document.getElementById('canvas3');
var ctx3 = can3.getContext('2d');

can3.width = 400;
can3.height = 400;

Функция рисования

function draw(v,c,w,h) {
    if(v.paused || v.ended) return false;
    c.drawImage(v,20,0,w,h);
    setTimeout(draw,20,v,c,w,h);
}

Ответы [ 2 ]

0 голосов
/ 30 мая 2019

На самом деле, я хочу записать элемент canvas, который имеет два разных видеоэлемента, которые создаются динамически. Поэтому я изменил свой код на этот код

function drawVideosToCanvas() {
    if (isStopDrawingFrames) {
        return;
    }
    var videosLength = videos.length;
    if(videosLength > 2){
        videosLength = 2;
    }

    var fullcanvas = false;
    var remaining = [];

    var length = videos.length;
    videos.forEach(function(video,idx) {
        if (!video.stream) {
            video.stream = {};
        }
        if (video.stream.fullcanvas) {
            fullcanvas = video;
        } else {
            if(idx==0 || idx == (length-1)){
                if(video.stream.active)
                    remaining.push(video);
            }
        }
    });

    if (fullcanvas) {
        canvas.width = fullcanvas.stream.width;
        canvas.height = fullcanvas.stream.height;
    } else if (remaining.length) {
        canvas.width = videosLength > 1 ? remaining[0].width * 2 : remaining[0].width;

        var height = 1;
        if (videosLength === 3 || videosLength === 4) {
            height = 2;
        }
        if (videosLength === 5 || videosLength === 6) {
            height = 3;
        }
        if (videosLength === 7 || videosLength === 8) {
            height = 4;
        }
        if (videosLength === 9 || videosLength === 10) {
            height = 5;
        }

        canvas.height = remaining[0].height * height;
    } else {
        canvas.width = self.width || 360;
        canvas.height = self.height || 240;
    }

    remaining.forEach(function(video, idx) {
        drawImage(video, idx);
    });

    setTimeout(drawVideosToCanvas, self.frameInterval);
}
0 голосов
/ 09 января 2019

Я бы использовал requestAnimationFrame для анимации. На 3-м холсте вы можете нарисовать видео или 2 предыдущих холста:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');

var can3 = document.getElementById('canvas3');
var ctx3 = can3.getContext('2d');



var cw = 200;
var ch = 200;
canvas.width = cw;
canvas.height = ch;
canvas2.width = cw;
canvas2.height = ch;
can3.width = 400;
can3.height = ch;

v.addEventListener('play', function(){
    draw();
},false);

function draw() {
    if(v.paused || v.ended) return false;
    context.drawImage(v,20,0,cw,ch);
    context2.drawImage(v,20,0,cw,ch);
    ctx3.drawImage(canvas,0,0,cw,ch);
    ctx3.drawImage(canvas2,cw,0,cw,ch);
    requestAnimationFrame(draw);
}
canvas{border:1px solid}
<video id="v" width="180" height="225" controls>
 <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/twitter_cat.mp4"  type="video/mp4">
</video>
<canvas id="canvas"></canvas>
<canvas id="canvas2"></canvas>
<canvas id="canvas3"></canvas>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...