Re: Fetching a web page (for use in canvas.drawWindow) - Mozilla

This is a discussion on Re: Fetching a web page (for use in canvas.drawWindow) - Mozilla ; Michael, It would be really nice if you added this to http://developer..mozilla.org/en/doc...nippets:Canvas ----- Original Message ---- From: "bowmanmc@gmail.com" To: dev-extensions@lists.mozilla.org Sent: Sunday, August 19, 2007 11:24:26 AM Subject: Re:Fetching a web page (for use in canvas.drawWindow) On Aug 14, 4:34 ...

+ Reply to Thread
Results 1 to 2 of 2

Thread: Re: Fetching a web page (for use in canvas.drawWindow)

  1. Re: Fetching a web page (for use in canvas.drawWindow)

    Michael,

    It would be really nice if you added this to http://developer..mozilla.org/en/doc...nippets:Canvas


    ----- Original Message ----
    From: "bowmanmc@gmail.com"
    To: dev-extensions@lists.mozilla.org
    Sent: Sunday, August 19, 2007 11:24:26 AM
    Subject: Re:Fetching a web page (for use in canvas.drawWindow)

    On Aug 14, 4:34 am, Neil wrote:
    > bowma...@gmail.com wrote:
    > >I'mtrying to fetch a webpage (not one that the user is currently on) and somehow get a window object I can use in canvas.drawWindow(). All of the examples I've seen get the window reference from either the open window or a tab.In this case, all I have is a url that I want to display a thumbnail of without making the user go there first.

    >
    > Oddly enough you need a window in order to be able to draw it (in
    > particular, so that the page will be wrapped to the correct width!)
    >
    > --
    > Warning: May contain traces of nuts.


    I've found a way to do this using iframes... sort of a hackthough.
    I'll go ahead and post the solution I came up with in case anyone else
    is trying to do something similar in the future. Also, if anyone comes
    up with something better, please let me know!

    Test.loadRemotePage = function() {
    //subtract a bit off to prevent horizontal scrollbars
    var windowWidth = window.innerWidth - 25;
    var iframe;
    iframe = document.createElement("iframe");
    iframe.id = "test-iframe";
    iframe.height = "10px";
    iframe.width = windowWidth+ "px";
    iframe.style.visibility = "hidden";
    iframe.src = this.url;
    // Here is where the magic happens... add a listener to the
    frame's onload event
    iframe.addEventListener("load", this.remotePageLoaded, true);
    //append to the end of the page
    window.document.body.appendChild(iframe);
    return;
    };

    Test.remotePageLoaded = function() {
    Test.console.logStringMessage("Loaded content for: "+ this.src);

    // Look back up the iframe by id
    var ldrFrame = document.getElementById("test-iframe");
    //get a reference to the window object you need for the canvas
    drawWindow method
    var remoteWindow = ldrFrame.contentWindow;

    //Draw canvas
    var canvas = document.createElement("canvas");
    canvas.style.width =Test.CANVAS_WIDTH + "px";
    canvas.style.height = Test.CANVAS_HEIGHT + "px";
    canvas.width = Test.CANVAS_WIDTH;
    canvas.height = Test.CANVAS_HEIGHT;
    var windowWidth = window.innerWidth - 25;
    var windowHeight = window.innerHeight;

    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0,
    Test.CANVAS_WIDTH,
    Test.CANVAS_HEIGHT);
    ctx.save();
    ctx.scale(Test.CANVAS_WIDTH / windowWidth,
    Test.CANVAS_HEIGHT / windowHeight);
    ctx.drawWindow(remoteWindow,
    0, 0,
    windowWidth, windowHeight,
    "rgb(0,0,0)");
    ctx.restore();
    };


    -Michael

    _______________________________________________
    dev-extensions mailing list
    dev-extensions@lists.mozilla.org
    https://lists.mozilla.org/listinfo/dev-extensions






  2. Re: Fetching a web page (for use in canvas.drawWindow)

    On Aug 20, 8:02 am, eric.j...@yahoo.com wrote:
    > Michael,
    >
    > It would be really nice if you added this tohttp://developer.mozilla.org/en/docs/Code_snippets:Canvas
    >
    > ----- Original Message ----
    > From: "bowma...@gmail.com"
    > To: dev-extensi...@lists.mozilla.org
    > Sent: Sunday, August 19, 2007 11:24:26 AM
    > Subject: Re: Fetching a web page (for use in canvas.drawWindow)
    >
    > On Aug 14, 4:34 am, Neil wrote:
    > > bowma...@gmail.com wrote:
    > > >I'm trying to fetch a webpage (not one that the user is currently on) and somehow get a window object I can use in canvas.drawWindow(). All of the examples I've seen get the window reference from either the open window or a tab. In this case, all I have is a url that I want to display a thumbnail of without making the user go there first.

    >
    > > Oddly enough you need a window in order to be able to draw it (in
    > > particular, so that the page will be wrapped to the correct width!)

    >
    > > --
    > > Warning: May contain traces of nuts.

    >
    > I've found a way to do this using iframes... sort of a hack though.
    > I'll go ahead and post the solution I came up with in case anyone else
    > is trying to do something similar in the future. Also, if anyone comes
    > up with something better, please let me know!
    >
    > Test.loadRemotePage = function() {
    > //subtract a bit off to prevent horizontal scrollbars
    > var windowWidth = window.innerWidth - 25;
    > var iframe;
    > iframe = document.createElement("iframe");
    > iframe.id = "test-iframe";
    > iframe.height = "10px";
    > iframe.width = windowWidth + "px";
    > iframe.style.visibility = "hidden";
    > iframe.src = this.url;
    > // Here is where the magic happens... add a listener to the
    > frame's onload event
    > iframe.addEventListener("load", this.remotePageLoaded, true);
    > //append to the end of the page
    > window.document.body.appendChild(iframe);
    > return;
    > };
    >
    > Test.remotePageLoaded = function() {
    > Test.console.logStringMessage("Loaded content for: " + this.src);
    >
    > // Look back up the iframe by id
    > var ldrFrame = document.getElementById("test-iframe");
    > //get a reference to the window object you need for the canvas
    > drawWindow method
    > var remoteWindow = ldrFrame.contentWindow;
    >
    > //Draw canvas
    > var canvas = document.createElement("canvas");
    > canvas.style.width =Test.CANVAS_WIDTH + "px";
    > canvas.style.height = Test.CANVAS_HEIGHT + "px";
    > canvas.width = Test.CANVAS_WIDTH;
    > canvas.height = Test.CANVAS_HEIGHT;
    > var windowWidth = window.innerWidth - 25;
    > var windowHeight = window.innerHeight;
    >
    > var ctx = canvas.getContext("2d");
    > ctx.clearRect(0, 0,
    > Test.CANVAS_WIDTH,
    > Test.CANVAS_HEIGHT);
    > ctx.save();
    > ctx.scale(Test.CANVAS_WIDTH / windowWidth,
    > Test.CANVAS_HEIGHT / windowHeight);
    > ctx.drawWindow(remoteWindow,
    > 0, 0,
    > windowWidth, windowHeight,
    > "rgb(0,0,0)");
    > ctx.restore();
    > };
    >
    > -Michael
    >
    > _______________________________________________
    > dev-extensions mailing list
    > dev-extensi...@lists.mozilla.orghttps://lists.mozilla.org/listinfo/dev-extensions


    Done. http://developer.mozilla.org/en/docs...nippets:Canvas

    Thanks everybody!
    -Michael


+ Reply to Thread