Creating a dynamic image
Is it possible to convert some part of a web page to an image. Let's say I have a div that contains text and image inside. I want to keep this whole div as a server side image so that I can use this image from next time.
Could you please let me know if there is a jquery plugin / php extension that does this. I just found out about this http://www.visionmasterdesigns.com/tutorial-convert-text-into-transparent-png-image-using-php/
but this is just converting text to png. But I want to convert a to image.
Thanks in advance.
Regards, ~ Shafi
You can use the browser engine to render the page as an image and then cut out the required section of the page.
I don't know if there is a jquery or php extension that does this for you, but you can use an exec call and use, for example, CutyCapt to render the page, and an image processing extension to crop it. I haven't tested the software myself, but this is a start.
source to share
"I have a sample div that is available to the user to modify it, which holds two images and some text. He can select an image from the many that we offer. Finally, I want to save it as one big image."
In this case, client-side screen capture is the wrong way to go. You have to allow compositing of the image in the users browser (which sounds like you did this part), but then send the browser back the information it needs to recreate the image * on the server, which you then execute with GD, ImageMagick, or something similar. It will be easier, cleaner and faster in different ways :)
* eg:
- imageid: 7
- text: 'blah'
- textcolour: #ffffff
- textize: 3
- textx: 10
- texty: 10
EDIT: You should probably also put the quoted part in the question as it is not entirely clear from the original post.
source to share
What exactly are you trying to do by doing this?
LOLcat style image headers? I would use Gd2 and modify the image directly.
Simplified layout of web pages? It is probably faster to cache the div source code. I also suggest creating some by hand and comparing the resulting file transfer sizes, I would put myself in almost all cases (original HTML + image) less than (resulting image).
source to share
You can investigate the possibility of using one of the services that do this. Most of them make sketches according to what they use deliciously. But http://www.webshotspro.com/ looks like it can do full res. Is there a way that you can use your API to take a screenshot and then strip out the bit you want? It really depends on what / why you get it.
source to share
Definitely don't do this on the client, even if it were possible (js and canvas element) you would need to believe that the client (and spammers can use it to show you ads instead of your partial screenshots) depends on the client fonts , color settings, etc.
The correct way to do it on the server is either invoke the command line browser, get a programmatic screenshot and close it (but it will be very difficult to implement, have a tax on the server and what happens when you clear the cache for example? On a popular site, everything is possible immediately redraw and try to install 100 browser instances in RAM ...).
I would:
- Consider if I need to do it this way, and is there a better solution to the original problem (do you need to render parts of the site in images this way? Would caching that part of the html do the trick? Or iframe?)
- If so, do it with PHP supported graphics libraries like GD, you will have to compose the drawing yourself, maybe there are several libraries that will allow you to do this at a higher level (instead filling the layout area with manual line splitting text, etc.) etc.).
source to share
If you are set to render an image, you should
- invoking an offline web browser, or
- embed an HTML (X) rendering engine, or
- restrict the input parameters so you can write a (much simplified) custom renderer, or
- delegate work to an external service
It all depends on the operating system of the server, what software is available on it, and what privileges you have.
-
on Windows: invoke IE using COM automation; on Linux: see http://www.chimeric.de/blog/2007/1018_automated_screenshots_using_bash_firefox_and_imagemagick
-
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 PHP-Qt or PHP-GTK bindings.
Hope it helps.
source to share