Per copiare un frame video in un file immagine, è necessario caricare correttamente il video, copiare l'immagine su una tela ed esportarla in un file. Questo è totalmente possibile, ma ci sono alcuni punti in cui è possibile incontrare problemi, quindi facciamolo un passo alla volta.
1) Caricamento il video
Per catturare i pixel, è necessario caricare il video in un tag <video>
, non un iframe
o object
o embed
. E il file deve provenire da un server web, che è lo stesso della stessa pagina web (a meno che non si usi , che è complicato e potrebbe non funzionare nel browser. Questo è limitato dal browser per motivi di sicurezza. il codice carica il video dal file system locale, che non funziona.
È inoltre necessario caricare il formato file corretto. IE9 + può riprodurre WMV, ma è improbabile che venga eseguito qualsiasi altro browser. Se è possibile, caricare multiple sources, utilizzando webm, mp4 e idealmente ogg/Theora.
var container = document.getElementById("myVid"),
video = document.createElement('video'),
canCapture = true;
if (!video.canPlayType('video/wmv')) {
/* If you don't have multiple sources, you can load up a Flash fallback here
(like jPlayer), but you won't be able to capture frames */
canCapture = false;
return;
}
video.src = 'myvideo.wmv';
container.appendChild(video);
video.play(); //or put this in a button click handler if you want your own controls
2) Successivamente, creare la tela e un contesto disegno. In realtà non è nemmeno necessario collegarlo al DOM, ma è necessario impostarlo sulla dimensione in cui si desidera salvare l'immagine risultante. Per questo esempio, supponiamo che tu abbia una dimensione fissa in mente, ma se vuoi, puoi impostarla su un multiplo della dimensione del video. Assicurati di eseguirlo all'interno di un evento "loadedmetadata" sul video, perché le dimensioni del video non saranno immediatamente disponibili.
var canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;
var ctx = canvas.getContext('2d');
// if you want to preview the captured image,
// attach the canvas to the DOM somewhere you can see it.
3) Cattura l'immagine sulla tela e salvala in un file. Metti questo codice in un evento onclick
su un pulsante o all'interno di un timer, tuttavia decidi quando catturare l'immagine. Usa il metodo drawImage. ([Questo articolo] fornisce una buona spiegazione, compresi i problemi di sicurezza. E 'lo stesso per il video che per l'immagine.)
//draw image to canvas. scale to target dimensions
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
//convert to desired file format
var dataURI = canvas.toDataURL('image/jpeg'); // can also use 'image/png'
4) Esportazione del file di immagine
Il file jpg è stata salvata come a Data URI, che è una lunga stringa javascript che rappresenta una versione codificata del file binario completo. Sta a te decidere cosa farne. Puoi posizionarlo direttamente in un elemento img
semplicemente impostandolo su src: myImage.src = dataUri;
.
Se si desidera salvarlo in un file, è necessario caricarlo su un server. Ecco un good tutorial su come farlo.
Come al solito, tutto quanto sopra riportato è limitato ai browser che lo supportano.Se intendi aderire al video wmv, sei praticamente limitato a Internet Explorer 9+. 6-8 non supportano né il tag video né il canvas. Se è possibile aggiungere altri formati video, è possibile utilizzare Firefox (3.5+) e Chrome.
Vuoi un'istantanea di un momento specifico nel video player o vuoi uno screenshot a grandezza naturale? Se stai chiedendo uno screenshot del video player, potrebbe essere un po 'impegnativo, ma una schermata può essere consultata su http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take- screenshot – aug