htmlcanvasfirefox-addon-sdkfirefox4

HTML5 canvas drawWindow on FF4/JetPack error


I borrowed code from thumbnail.js modified it so that it takes screenshot of the entire page (at least thats the idea)

  Code:
    function takeScreenshot(window) {
       const { Cc, Ci, Cu } = require("chrome");
       const AppShellService = Cc["@mozilla.org/appshell/appShellService;1"].
         getService(Ci.nsIAppShellService);

      var ss = AppShellService.hiddenDOMWindow.document
                        .createElementNS("http://www.w3.org/1999/xhtml", "canvas");
      ss.mozOpaque = true;
      ss.width = window.innerWidth;
      ss.height = window.innerHeight;
      var ctx = ss.getContext("2d");
      ctx.drawWindow(window, 0, 0, 500, 500, "rgb(255,255,255)"); // here is line 18 - where the error occured
      return ss.toDataURL();
    }

but I got an error ...

  Code:
    Traceback (most recent call last):
      File "resource://jid0-qpxlmo42unizthqqbyuvdjhd59y-api-utils-lib/timer.js", line 64, in notifyOnTimeout
        this._callback.apply(null, this._params);
      File "resource://jid0-qpxlmo42unizthqqbyuvdjhd59y-api-utils-lib/content/worker.js", line 64, in emitter
        emit.apply(scope, params);
      File "resource://jid0-qpxlmo42unizthqqbyuvdjhd59y-api-utils-lib/events.js", line 147, in _emit
        return this._emitOnObject.apply(this, args);
      File "resource://jid0-qpxlmo42unizthqqbyuvdjhd59y-api-utils-lib/events.js", line 177, in _emitOnObject
        listener.apply(targetObj, params);
      File "resource://jid0-qpxlmo42unizthqqbyuvdjhd59y-addon-kit-lib/context-menu.js", line 609, in workerOnMessage
        item.onMessage(msg);see error
      File "resource://jid0-qpxlmo42unizthqqbyuvdjhd59y-what-inspires-me-lib/main.js", line 27, in null
        var imgdata = takeScreenshot(tabs.activeTab.window);
      File "resource://jid0-qpxlmo42unizthqqbyuvdjhd59y-what-inspires-me-lib/main.js", line 18, in takeScreenshot
        ctx.drawWindow(window, 0, 0, 500, 500, "rgb(255,255,255)");
    [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMCanvasRenderingContext2D.draw
    Window]"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: resource://jid0-qpxlmo42unizthqqbyuvdj
    hd59y-api-utils-lib/securable-module.js -> resource://jid0-qpxlmo42unizthqqbyuvdjhd59y-what-inspires-me-lib/main.j
    s :: takeScreenshot :: line 18"  data: no]

whats the problem?


Solution

  • This is likely far too old, but in case somebody else stumbles on this. The following code works for me on FF 3.0 up to FF 6 Beta

    // Mostly taken from
    // http://wiki.github.com/bard/mozrepl/interactor-screenshot-server
    function (tab,rect) {
        var browserWindow = Components.classes['@mozilla.org/appshell/window-mediator;1']
            .getService(Components.interfaces.nsIWindowMediator)
            .getMostRecentWindow('navigator:browser');
        var canvas = browserWindow
               .document
               .createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
        var browser = tab.linkedBrowser;
        var win = browser.contentWindow;
        var left = rect.left || 0;
        var top = rect.top || 0;
        var width = rect.width || win.document.body.clientWidth;
        var height = rect.height || win.document.body.clientHeight;
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, width, height);
        ctx.save();
        ctx.scale(1.0, 1.0);
        ctx.drawWindow(win, left, top, width, height, 'rgb(255,255,255)');
        ctx.restore();
    
        //return atob(
        return canvas
               .toDataURL('image/png', '')
               .split(',')[1]
        // );
    }