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);
  }
}
(Image attribution: Camera designed by Simon Child from The Noun Project)

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

Comments

  • photo

    Michael A. Puls II

    Thursday, May 17, 2012

    "Only the visible portion of the page is included in the screenshot"



    :(
  • photo

    JanGen

    Thursday, May 17, 2012

    Does the api let you zoom out first, take screenshot and zoom in again?

    IMHO a much more powerful approach would be if the api could take a screenshot of any element in the DOM.
    so you can take screenshots of parts of a page ( how an element is rendered).
    Would be helpful for writing extensions that offer help for filling in forms etc.
  • photo

    QuHno

    Thursday, May 17, 2012

    @Michael A. Puls II
    Idea:
    You could scroll one page, capture another screenshot, scroll one page ...
    and add up all screenshots in one canvas. May be a good enough scripter can write a working example that can do that and post it here in the comments?
  • photo

    Christoph

    Monday, October 8, 2012

    there should be an option to specify coordinates (top left & bottom right) for the captured window

    for all of you who want to know how you can make a screenshot of the entire page (small version - alternative to adding pages in a canvas together like others suggested already):
    http://my.opera.com/christoph142/blog/2012/10/08/taking-a-screenshot-of-the-complete-page-using-operas-new-screensho-3
  • photo

    Zotlan

    Tuesday, October 9, 2012

    I'm a bit confused about plugin support for this feature to be honest. On Linux screenshots include Flash content, but on WinXP they do not. Is the same true for all plugins? What about plugins on Macs? Is there a difference btween 32bit and 64 bit versions?

    PS: It'd be helpful to add to this article that using <feature name="opera:screenshot" required="false"/> is essential for the screenshot API to work, took me a while to figure that out :shamedface;
  • photo

    Дмитрий

    Thursday, November 8, 2012

    Hmmm... It's a good news if on Linux the screenshot includes Flash content. On Windows 7 x86 it doesn't starting from build 1581. The same is true for other plugins (VLC, WMP). I hope, this bug will be fixed someday.
    My crazy dream is that the screenshot will include an overall browser window, not just a webpage. In this case there will be no need any more to use external screenshot programs. Opera itself will be all-sufficient.
No new comments accepted.