ezAR Snapshot Plugin for Cordova

One of the recent enhancements to the ezAR toolkit is the introduction of the Snapshot plugin for Cordova (Snapshot) to capture screenshots of a Cordova app user interface. The Snapshot works in conjunction with the ezAR VideoOverlay plugin or can be used standalone in any Cordova app, e.g., selfie app. The snapshot function can be configured with options to save the snapshot image to the device picture album (default) and to generate the image in either JPG (default) or a PNG format.

A key difference between ezAR Snapshot and an OSS snapshot plugin I reviewed sometime ago is that ezAR Snapshot will capture a combined image of the a video preview, if present, and the Cordova WebView content. This is a non-trivial process as there is no iOS or Android api that will directly grab a bitmap of the display. Instead the plugin has to grab a video frame and combine it with an image of the WebView content on the fly. 

Here's a snapshot image I created of a live CSS landscape app I'm working on, i.e., Snapshot used in standalone mode.

Getting started with the Snapshot plugin is easy.

1) Download and unzip the ezAR Startup Kit which includes the Snapshot plugin for Cordova

Download here

2) Install snapshot plugin using the Cordova CLI

cordova plugin add <path>/com.ezartech.ezar.snapshot

3) Call the JavaScript snapshot function with options

ezar.snapshot(
  function(aBase64Image) {
    //do something with image here
  }, 
  function(err) {
    //handle error
    alert('Error: ' + err);
  }, 
  { //options
    "saveToPictureAlbum": true,  //default
    "encoding": ezar.ImageEncoding.PNG //JPG default
  });

That's it. When this snapshot function is called it will create an image

An issue you may encounter is unwanted HTML artifacts such as a snapshot button appearing in your snapshot image. In my JavaScript function that controls the snapshot process, I first hide unwanted HTML artifacts. Then I wrap the ezar.snapshot() call in a setTimeout. This gives the DOM a chance to update the UI with the unwanted artifacts hidden from view before the snapshot image is created. Here is an example from my ezar-selfie app.

function doSnapshot() {
  document.getElementById('snapBtn').style.display = "none";  
  setTimeout( function() {
    ezar.snapshot(
      function() {
        document.getElementById('snapBtn').style.display = "block";
      },
      function(err) {
        alert('Error: ' + err);
        document.getElementById('snapBtn').style.display = "block";
      },
      {"saveToPhotoAlbum": true});
   },10);
}

The next time you're developing an app and think "hey it would be great if my users could capture an image of the display", think of the ezAR Snapshot plugin.