如何在没有Jquery的情况下将HTML5视频快照附加到滚动DIV

如何从本地播放的HTML5视频中获取多个快照(通过onclick按钮)，并将带有时间戳的快照图像添加到没有jQuery或外部库的可滚动div ?

我能够通过画布进行快照，但我如何将画布图像转换为小文件大小的格式，并将图像(与href="脚本)附加到滚动div?

codeine示例http://codepen.io/anon/pen/OVGZEg

<span> Working example</span>
<br>

<video controls id="sourceVid">
    <source src="http://html5multimedia.com/code/ch9/media/elephants-dream-medium.mp4" type="video/mp4">
    <source src="../media/elephants-dream-medium.webm" type="video/webm">
</video>
<canvas></canvas>
<br>
    <button id="snap" onclick="snap()">Take Snapshot</button>
<br>
<br>
    <br>
<!----------------------------------------
Desired Result
---------------------------------------->
<div id="DesiredResult" style="background-color:grey;width: 100%;">
<br>
Desired Result
<br>
    How can I take a snapshot & add it to scrolling DIV on the left?
    <br>
<video controls id="Result" style="float: left;" >
        <source src="http://html5multimedia.com/code/ch9/media/elephants-dream-medium.mp4" type="video/mp4">
        <source src="../media/elephants-dream-medium.webm" type="video/webm">
    </video>
<div id="snapshotscroll" >
<div id="snapshot#1" class="snapshots" style="background-color:#FE2E2E;" >
    snapshot image
    <br>#1
    </div>
    <div id="snapshot#1" class="snapshots" style="background-color:#FA5858;" >
    snapshot image
    <br>#2
    </div>
    <div id="snapshot#1" class="snapshots" style="background-color:#F78181;" >
    snapshot image
    <br>#3   
    </div>
    <div id="snapshot#1" class="snapshots" style="background-color:#F5A9A9;" >
    snapshot image
    <br>#4   
    </div>
    <div id="snapshot#1" class="snapshots" style="background-color:#F6CECE;" >
    snapshot image
    <br>#5   
    </div>
</div>
</div>
        <button id="snap" onclick="alert('How can I take a snapshot & add it to scrolling DIV on the left?')">Take Snapshot</button>

CSS
video, canvas {
    border:1px solid #000;
}
#snapshotscroll {
overflow-y: scroll;
height:258px;
width:220px;
}
.snapshots {
width: 200px;
height: 100px;
border: 1px solid #000;
}
JAVASCRIPT

        // Get handles on the video and canvas elements
        var video = document.getElementById('sourceVid');
        var canvas = document.querySelector('canvas');
        // Get a handle on the 2d context of the canvas element
        var context = canvas.getContext('2d');
        // Define some vars required later
        var w, h, ratio;
        // Add a listener to wait for the 'loadedmetadata' state so the video's dimensions can be read
        video.addEventListener('loadedmetadata', function() {
            // Calculate the ratio of the video's width to height
            ratio = video.videoWidth / video.videoHeight;
            // Define the required width as 100 pixels smaller than the actual video's width
            w = 200;
            // Calculate the height based on the video's width and the ratio
            h = 100;
            // Set the canvas width and height to the values just calculated
            canvas.width = w;
            canvas.height = h;          
        }, false);
        // Takes a snapshot of the video
        function snap() {
            // Define the size of the rectangle that will be filled (basically the entire element)
            context.fillRect(0, 0, w, h);
            // Grab the image from the video
            context.drawImage(video, 0, 0, w, h);
        }