Question

I’ve a created a simple page layout program for a client and would like to provide a thumbnail view of pages like the pages palette in InDesign. Is it possible to use the HTML5 canvas element to create a copy of a single element.

For example, each page is an article tag. I want to copy this article using canvas and reduce it to say 10% then draw it to the screen.

Answer 1

There’s no current method of taking snapshots of parts of the page in the canvas specification. Firefox extends the canvas element with a method called drawWindow(), which accepts the co-ordinates and dimensions of the area you want to take a picture of. However, this method is only available to scripts running with chrome-level privileges due to security concerns. The comment on the method in the code indicates that this might change in the future:

// We can't allow web apps to call this until we fix at least the
// following potential security issues:
// -- rendering cross-domain IFRAMEs and then extracting the results
// -- rendering the user's theme and then extracting the results
// -- rendering native anonymous content (e.g., file input paths;
// scrollbars should be allowed)

http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352