Screenshot API

By Opera Software

From Opera 15 onward, Opera 11 & 12’s extension format is no longer supported, and instead, we’ve switched to Chromium’s extension model. Check out our new documentation for developing extensions for Opera 15 and higher and start building your own extensions.

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('2D');
    ctx.putImageData('theImage');
    theData = aCanvas.toDataURL(type);
    callBack(theData);
  }
}

This article is licensed under a Creative Commons Attribution 3.0 Unported license.