Video og Canvas

Hva

Canvas-elementet er nyttig til det meste. Vi kan ganske enkelt kopiere hele eler deler av en video til et canvas-element. Følgende versjoner av metoden drawImage er aktuelle:

drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

De kan alle ta ImageElement, CanvasElement eller VideoElement som parameteren image.

	dx, dy : left - top i destination (dit vi kopierer)
dw, dh : bredde og høyde i destination
sx, sy : left - top i source (der vi kopierer fra)
dw, dh : bredde og høyde i source

Dette gir oss en mengde muligheter for å kopiere deler av en eller flere videoer til en eller flere canvaselementer. Nedenfor gjør vi en veldig enkel øvelse. Vi kopierer en video slik den er til en canvas. Videre er det mulig å fryse canvas til et img-element. Videoen er lastet ned fra Youtube og involverer en stor fotballspiller og en bra artist.

Video

Canvas

Image

Den aktuelle javascriptkoden er slik:

var V=null;  // the video element
var C=null;  // the canvas element
var VW; //Video width
var VH; //Video height
var context;
function doIt(){
       // adjust canvas to match video
    VH=V.videoHeight; 
    VW=V.videoWidth;
    C.style.width=""+VW+"px";
    C.style.height=""+VH+"px";
    if (C.getContext)
    {
         context = C.getContext('2d');
         setInterval("refresh()", 33);
    } 
    else {alert('cannot do canvas');
    }
    V.muted=true;
}

// turn sound on/off
function toggleSound(){
    V.muted=!V.muted;
}

// this is where we copy from video to canvas
function refresh(){
    // startclipX, startclipY,clipWidth,clipHeigth,placeX,placeY,W,H
    context.drawImage(V,0,0,VW,VH,0,0,C.width,C.height);

}

// freeze an image from the canvas
function Freeze(){
    imElt=document.getElementById("imageID");
    imElt.src=C.toDataURL();
    imElt.width=VW;
    imElt.height=VH;
}

// toggle view of an element
function toggleView(eltId){
    var elt=document.getElementById(eltId);
    if(elt.style.display=="block")
        elt.style.display="none";
    else
        elt.style.display="block";
}

Du kan også inspisere resultatet og kildekoden på en enklere side:
test1.html https://borres.hiof.no/wep/can/video/test1.html