Dynamic image creation

Question

Hi,

Is it possible to convert some part of web page into a image. Lets say i have a div which contains a text and image inside. I want to store this entire div as an image on the server side, So that i can use that image from the next time onwards.

Could you let me know whether there is any jquery plugin/ php extension which does this. I just found out this http://www.visionmasterdesigns.com/tutorial-convert-text-into-transparent-png-image-using-php/

but that is just converting text into png. But i want to convert a into image.

Thanks in advance.

Regards, ~Shafi

Answer 1

I'm pretty sure you can't do this in JavaScript / jQuery. Not without some plugin anyway.

Also it sounds a little strange to store text as an image.

Answer 2

You could investigate the possibility of using one of the services that does this. Most of them do thumbnails, along the lines of what delicious uses. But http://www.webshotspro.com/ looks like it can do full res ones. Is there a way you can use their API to get the screenshot, and then crop out the bit you need? It really depends on what/why you care capturing this.

Answer 3

You could use a browser engine render the page as an image, and then cut out the requested section of the page.

I don't know if there is a jquery or php extension that does it for you, but you could use an exec call and use for instance CutyCapt to render the page, and an image processing extension to crop it. I haven't tested the software myself, but it is a start.

Answer 4

Definitely don't do it on client, even if there would be way to do it (js and canvas element), you would have to believe the client (and spammers could use it to give you ads instead of your partial screenshots), be dependent on client's fonts, color settings etc.

Correct way to do it is on the server, either calling come commandline browser, getting screenshot programatically and closing it (but that is going to be very tricky to implement, taxing on server, and what happens when you eg. clear a cache? on a popular site, everything can get re-rendered at once, and try to fit 100+ browser instances to RAM...).

I would:

1. Consider if I really need to do it this way, and whether there is a better solution to an initial problem (you need to render parts of site into images exactly why? Would caching that part of html do the trick? Or Iframe?)
2. If yes, do it with PHP's supported graphic libraries, like GD, you'll have to composite the drawing yourself, maybe there are some libraries that will allow to do it on higher level (filling an area of layout with text instead of manually splitting it line-by line, etc...)

Answer 5

What exactly are you trying to accomplish by doing this?

LOLcat-style image captioning? I'd use Gd2 and modify the image directly.

Simplified web-page layout? Probably quicker to cache the div's source code. I'd also suggest creating a few manually and comparing the resulting file-transfer sizes, I'd bet in almost all circumstances (original HTML+image) is smaller than (resulting image).

Answer 6

If you're determined to render an image, you must

1. call a stand-alone web browser, or
2. embed an (X)HTML rendering engine, or
3. restrict the input options such that you can write a (greatly simplified) custom renderer, or
4. delegate the work to an external service

All of these depend on the server's operating system, what software is available on it, and what access privs you have.

1. on Windows: call IE using COM automation; on Linux: see http://www.chimeric.de/blog/2007/1018_automated_screenshots_using_bash_firefox_and_imagemagick

2. on Windows: see http://msdn.microsoft.com/en-us/library/system.windows.forms.webbrowser.aspx ; on Linux, see http://webkit.org/building/build.html or http://khtml2png.sourceforge.net/ You might also consider the PHP-Qt or PHP-GTK bindings.

Hope that helps.

Answer 7

"I have a sample div which is exposed to the user to modify it. That accomodates two images and some text. He can select the image out of many which we offer. Finally I want to store it as one big image."

In that case, client-side screen capture is the wrong way to go about it. You should allow the image to be composited on the users browser (as it sounds like you have this part done), but then have the browser send back the information required to recreate the image* on the server, which you then do with GD, ImageMagick or something similar. It'll be easier, cleaner and quicker in so many ways :)

*for example:

• imageid: 7
• text: 'blah'
• textcolour: #ffffff
• textsize: 3
• textx: 10
• texty: 10

EDIT: You should probably also put the quoted part into the question, as it isn't entirely clear from the original post.