Сохранить нарисованное холст для подачи на каждый интервал ⇐ Php

[Anonymous]

Ниже является частью кода HTML и JS, который пытается сфотографировать изображение из веб -камеры в некотором определенном интервале и сохранить его в виде отдельных файлов на сервере: < /p>




const player = document.getElementById('player');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const captureButton = document.getElementById('capture');
const constraints = {video: true,};

navigator.mediaDevices.getUserMedia(constraints)
.then((stream) => {
player.srcObject = stream;
});

setInterval(drawevery, 350);

function drawevery(){

$(document).ready(function() {
var image = canvas.toDataURL("image/png");
$.post("server.php", { pimg: image } );
});

context.drawImage(player, 0, 0, canvas.width, canvas.height);
}
< /code>

php code: < /p>


< /code>

Но это приводит только к пустым изображениям. Может ли проблема заключаться в том, что холст не полностью загружен до сохранения, и если да, то как его решить?function drawevery(){

context.drawImage(player, 0, 0, canvas.width, canvas.height);

var img = new Image();

img.onload=function(){

var image = canvas.toDataURL("image/png");

$.post("savePic.php", { pimg: image } );

}

img.src=canvas.toDataURL();

setTimeout(drawevery, 400);

}


Подробнее здесь: https://stackoverflow.com/questions/597 ... y-interval