Question

Is it possible at all to create a feature on a website where you allow a user to select a portion of the web page, and that selected area is rendered as an image?

Its similar to the “Cropper” desktop program but needs to be embedded on the web page

It sounds near impossible using JS, flash, silverlight or any web based tools but I just wanted to get a 2nd opinion. Thanks

Answer 1

I did look into JCrop but that only
works with images. The requirement
here calls for something even more
powerful. You literally select a
portion of the webpage(using a j crop
style overlay div which isn’t too hard
to implement) and then that portion is
cropped out

That’s not generally possible for security reasons.

For example, just talking about Firefox, see here:

https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas

Mozilla’s canvas is extended with the
drawWindow() method. This method draws
a snapshot of the contents of a DOM
window into the canvas.

Sounds good! But:

This feature is only available for
code running with Chrome privileges.
It is not allowed in normal HTML
pages. Read why.

And the notes in the “Read Why” link:

// 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)

If you are truly determined to make this work and you have a VPS/dedicated server, you might be able to do this by controlling a browser server-side (using Selenium RC) that captures a screenshot of an arbitrary web page, and returns the image to the browser. The user can then “crop” from this image.

Or easier than Selenium RC: you could use wkhtmltoimage from wkhtmltopdf to generate the screenshot.

Not easy, and it might not even work for what you’re trying to do.