Когда я пытаюсь получить снимок экрана и сохранять его как PNG перед загрузкой видео на сервер, у меня возникает следующая проблема.
Надеюсь, вы сможете решить мою проблему...
/*Output image show view*/
$('#file_browse').change(function(e){
getVideo(this);
});
var capbtn = document.querySelector('#video_capture');
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var w, h, ratio;
video.addEventListener('loadedmetadata', function() {
ratio = video.videoWidth / video.videoHeight;
w = video.videoWidth - 100;
h = parseInt(w / ratio, 10);
canvas.width = w;
canvas.height = h;
}, false);
capbtn.addEventListener("click", function(){
context.fillRect(0, 0, w, h);
context.drawImage(video, 0, 0, w, h);
var objImageData = canvas.toDataURL("data:image/png;");
});
function getVideo(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var video = document.getElementsByTagName('video')[0];
var sources = video.getElementsByTagName('source');
sources[0].src = e.target.result;
video.load();
video.style.display="block";
}
reader.readAsDataURL(input.files[0]);
}
}
<input id="video_capture" type="submit" value="Capture" />
<video id="video_view" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<canvas width="300" height="300"></canvas>
