createimagefrom ?

[Joleen73]

Hello everyone I am new member my name is Joleen, I hope everyone had a joyous holiday season. I am not a coder of any sorts usually I Google until I find what I need and make it work one way or another but my current adventure has me stumped.
Before I bore everyone with a long winded post I thought I would first ask a simple question, Is there any possible way using GD to create an image from the contents inside a given <DIV>?

Thanks all.

[CrYpTiC_MauleR]

Do you mean make an image with the 'text' from inside a DIV?

<div>welcome to ERT</div>

so image will have the words 'welcome to ERT'?

[GrandSchtroumpf]

Welcome Joleen.

If you want something like khtml2png but restricted to a section of your page, then you'll need more than just GD.

Those fancy html-to-image converters all use a browser or a browser library to open you page and take a screen capture of the result.

I guess the converter should be able to get the coordinates of your "DIV" from the browser (javascript can do that).  Then your script could use GD to crop the image based on those coordinates.  I have not yet seen a converter that does that "out of the box".

Another idea is to modify the page to add some kind of way for GD to identify the section you want to crop...  for instance a thick border of some arbitrary color (you can do that using CSS).  Then you can use any converter to convert your page to an image.  Finally, you can use GD to identify the region that needs to be cropped and crop it (don't ask me for the exact code).  This is not a perfectly reliable method, but at least it won't require you to modify the converter.  You can also try using CSS to absolutely-position your "DIV" at the top-left of the page.  This will make it easier for your GD code to identify the region that needs to be cropped, but, depending on context, it might also modify the width of your "DIV" and you'll need to set a non-transparent background on your "DIV".

For better advice, we'll need to know exactly what you are trying to do.
Do you have control on those pages or do they come from a third-party website?
I guess your converter does not have to be 100% generic, since you need to identify the "given DIV".
BTW, how do you identify that "given DIV"?  By ID?

Cheers.

[Joleen73]

Hiya guys, Thanks so much for the speedy replies. This may be a rather long post so I am apologizing in advance, I will try to explain exactly what I have going on.

I am attempting to make my own card creation site.

I have a page with two divides, lets call them divide A and divide B.
Divide A is used to load images from various folders via Ajax, no problem there.
The images have a drag class applied so they can moved over to divide B.

In divide B I am using JavaScript in order to change background color at will. The out come is allow users to choose a background color for the divide then place images from divide A onto it creating there own personal card.

Once the card is finished I need to add a save button to compile the divide contents into a finished PNG image and allow the user to download it.

Here are my problems:
The small images being used to create the card number around 300 in total and will be placed into divide B anywhere the user desires.

Others have told me I needed to look into Imagecreate, I did that but all the examples shown on php.net where of no help due to the fact the coordinates and the filenames of the images will be totally random.

GrandSchtroumpf, yes I have control of the pages they are running on my local machine, and I am identifying the DIV's by ID.
   
I hope I have explained my problem better, If anyone can please help me with this I would sincerely appreciate it, I have been trying to figure this out for two months now.

Thanks everyone,
Joleen

[GrandSchtroumpf]

Thank you for this complete explanation.
Forget about the html-to-image converters, it won't help.

The first thing to understand is that html presentation and javascript are client side while GD is server side.

1.  Your server sends the initial html page that the browser displays.  At this point, the server does not even know for sure what the browser displays.  That's the beauty of html.  For instance, some browser might have "high contrast" color settings that overrides all the colors, some might have images disabled, some might not have the font that you specify.  But most browsers will have default settings.

2.  The browser uses AJAX to fetch images from the server.  Typically, the server won't keep track of the images that were added (it's too complex and does not have any advantage).

3.  The user creates the card by dragging the images inside the browser.  At this point, your server has absolutely no clue about what the browser displays.

4.  The user hits the "save" button.  At this point, the browser needs to send the content of the card to the server.  This will consist in a list of image identifiers (or filenames) with their respective (x, y ,z) coordinates.  You build that list using javascript.

5.  The server receives the content of the card (the list from point 4) and builds the final card image using GD.

That's all.  Piece of cake, no?

Cheers.

[Joleen73]

Thank you GrandSchtroumf,
Sorry I haven't posted sooner but I've been down with a cold. Your response confirms what I originally thought the process is two fold: JavaScript then PHP.
The PHP side I think I have licked, I've read all the documentation on imagecreate then I just force download the newly created image. The JavaScript bit is what's going to be the real bugger.

Thanks again,
Joleen
 

[GrandSchtroumpf]

Everybody is down with a cold these days.  I hope you get well soon.
Since you are not a coder, i guess you are using some javascript libraries like scriptaculous or YUI.  These libraries should make it fairly easy to build your list.  Firefox's DOM inspector is a great help for this kind of task.

[Joleen73]

Thank you GrandSchtroumpf :)