Screenshot

This functionality has not landed in a stable Opera version yet, but you can use it already in Opera Next.

opera.extension.getScreenshot() (also BrowserTab.getScreenshot())

Captures a screenshot of a page within a tab.

Overview

The Screenshot API for Opera extensions enables a screenshot to be taken of a page within a tab. Only the visible portion of the page is included in the screenshot, excluding the browser chrome (i.e. no toolbars and scrollbars, etc.).

There is a single method available to create a screenshot — getScreenshot() — and this method can be called from two contexts:

• An extension's injected script
• An extension's background script

Because of this, possible use cases are either a toolbar button to call the method in the background script, or an in-page UI to call the method in an injected script.

The getScreenshot() method does not return a value, but rather executes a callback function which is specified as its parameter. The callback function in turn needs its own parameter with an arbitrary name. This parameter is an ImageData object which can be written to an HTML5 <canvas> context using the putImageData() method.

Example

<!-- 
  The configuration file ('config.xml').
-->
<?xml version='1.0' encoding='utf-8'?>
<widget xmlns="http://www.w3.org/ns/widgets">
    <feature name="opera:screenshot" required="false"/>
</widget>

//
// An injected script (e.g. includes/injected.js) 
//

window.addEventListener('load', function() { 
  // Check the Screenshot API is available
  if (opera.extension.getScreenshot) {
    opera.postError('Screenshot API found');
            
    // Callback function to replace page content with the screenshot
    function applyScreenshot(imageData) {
      opera.postError('Appending screenshot to current page...');
      
      // Create a blank canvas
      var canvas = document.createElement('canvas');
      canvas.width = imageData.width;
      canvas.height = imageData.height;

      // Write the screenshot image data to the canvas context
      var ctx = canvas.getContext('2d');
      ctx.putImageData(imageData, 0, 0);

      // Replace the page's content with the canvas
      var body = document.body;
      body.innerHTML = '';
      body.appendChild(canvas);
      
      opera.postError('Snapshot appended to current page.');
    }
    
    // Use the API's method to execute the callback function
    opera.extension.getScreenshot(applyScreenshot);        
  } else {
    opera.postError('No Screenshot API found');
  }    
}, false);

Compatibility

Google Chrome extensions have access to a similar API which uses a method named captureVisibleTab(). If you wish to port a Google Chrome extension to Opera, below is a function you can use to mimic the behaviour of captureVisibleTab().

// Note: This assumes that all optional arguments are present
function captureVisibleTab(window, options, callBack) {
  if (options.format)
    var type = "image/" + options.format;
  else
    type = "image/jpeg"; //chrome gives jpeg by default
    
  opera.extension.getScreenshot(handleImage);
  
  function handleImage(theImage) {
    var myCanvas = document.createElement('canvas');
    myCanvas.width = theImage.width;
    myCanvas.height = theImage.height;
    var ctx = aCanvas.getContext('2DContext');
    ctx.putImageData('ImageData');
    theData = aCanvas.toDataURL(type);
    callBack(theData);
  }
}