JavaScript Snippet – Get Video Frame As An Image

Lately I have dedicated a little more time to developing an electron app which saves a frame of every video it encounters as PNG images:

JW Videos with images captured via a video element and a canvas element.

JW Videos with images captured via a video element and a canvas element.

Believe it or not the code to turn a frame of a video into an image element is not terribly complicated. Below is a simple function that can be used to get the an image element corresponding to a specific frame in a video:

This getVideoImage() function takes three arguments:

  1. path {string}:
    The path to the video. In the case that you are using this code in a web page this must be a video within the same domain.
  2. secs {number | function(duration): number}:
    If this is a non-negative number this will indicate the time of the frame to capture in seconds. If this is a negative number this will indicate the time of the frame from the end of the video to capture in seconds. If this is a function it will be passed the duration as a number and the return value should be a number (positive or negative) which indicates the time of the frame that should be captured.
  3. callback {function(img, currentTime, event)}:
    The function which is called either after loading the frame’s image successfully or after getting an error. The first argument passed will be the Image object that is created (if no error occurred). The second argument passed will be the actual time in seconds used to pull the frame’s image (if no error occurred).
    The third argument will either be a seeked event or an error event.

This function can be used as is or can be modified. It is important to note that unless the video is in the exact same domain as the web page this code will NOT work due to the canvas being tainted. You can paste the following code into the code editor on this W3Schools sandbox page to see an example of getting multiple frames:

Let me know if you have any questions or suggestions and as usual, enjoy the free code! :cool:

JavaScript Snippet – toggleFullscreen()

Making your web app toggle back and forth between full screen mode is a simple enough task as long as you do some feature testing. You can also use this handy function which will step through the 4 different feature tests:

This code is based off of documentation found here on MDN. I personally am using this code on my Big It! (a small web app that simply shows user entered text as big as possible). Feel free to use this function in any of your projects. :cool:

Canvas – Making A Simple Logo

A few days ago while I was working on updating my resume I thought about ways to add my simple “CW” (short for Chris West of course) logo to it. At the time of writing this article I presented my logo on CWestify.com using CSS3:



Leveraging the Canvas

One great thing that Mozilla has promoted for years is the <canvas>. As long as the canvas is not tainted it can turn its contents into an image (PNG or JPG). The great thing about using PNGs is their support of transparency and partial transparency. So the question is, “how do you draw HTML on a <canvas>?” Without using a library you can actually do so by inlining the styles and then turning the HTML code into SVG:


  
    
CW

Next we can either get the outerHTML of this SVG element or we can store the value directly in JavaScript (I will choose the latter for this example):

var data = '\
  \
    \
      
\
CW
\
\
\
';

Now we need to turn this SVG into something the <canvas> will display. The <canvas> will display images so we can load the SVG code into an image’s source:

// Define an image and set the source of the image to the SVG
var img = new Image();
img.src = 'data:image/svg+xml;base64,' + window.btoa(data);

Once the image object loads, we can then draw it onto the <canvas>:

// Variable to store the data URI for the PNG
var strPNG;

// Define an image
var img = new Image();

// Once the image loads draw it onto a new canvas
img.onload = function() {
  // Create a canvas
  var canvas = document.createElement('canvas');
  canvas.style.height = 0;
  canvas.height = 300;
  canvas.width = 300;

  // Draw the image onto the canvas
  canvas.getContext('2d').drawImage(img, 0, 0);

  // Store the image's data URI in a variable for later
  strPNG = canvas.toDataURL();
};

// Set the source of the image to the SVG data
img.src = 'data:image/svg+xml;base64,' + window.btoa(data);

Of course, since we are creating a <canvas> without adding it to the DOM we wanted to immediately use it to get its data URI and store it off into a variable (strPNG) for later use. All together the code looks like this:

var data = '\
  \
    \
      
\
CW
\
\
\
'; // Define an image var img = new Image(); // Once the image loads draw it onto a new canvas img.onload = function() { // Create a canvas var canvas = document.createElement('canvas'); canvas.style.height = 0; canvas.height = 300; canvas.width = 300; // Draw the image onto the canvas canvas.getContext('2d').drawImage(img, 0, 0); // Do something useful with the PNG's URI doSomethingWithLogoURI(canvas.toDataURL()); }; // Set the source of the image to the SVG data img.src = 'data:image/svg+xml;base64,' + window.btoa(data);

As you can see in the code above, after drawing the image on the canvas we call the doSomethingWithLogoURI() function so that it can use it.

Resulting PNG Image

Using this method produced an image in Chrome which I then saved off and uploaded to this blog so that regardless of the browser’s CSS3 capabilities my logo will always look the same:

CWestify Logo

CWestify Logo

Conclusion

Now we know that as long as we don’t taint the canvas with some outside source, we can basically turn any HTML element into a PNG. If we wanted to we could even use the method I outlined a while back to make such an image downloadable upon clicking on it. Perhaps this may open up your mind to other cool applications. Have fun! :cool:

JavaScript, Math, and much more.