canvas.toDataURL () Sicherheitsfehler Der Vorgang ist unsicher
Wenn ich versuche, einen Screenshot zu erstellen und als PNG zu speichern, bevor ich ein Video auf den Server hochlade, tritt das folgende Problem auf:
Ich hoffe du kannst mein Problem lösen ...
/*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>