2

I want to make a button generator with javascript in my site, something like this http://css-tricks.com/examples/ButtonMaker/ .

But I want to add a save button too, so that the user will be able to save the button image he creates. I want to save the image in my server with PHP if possible.

Does anyone have an idea, of what should I really read or search for?

Thanks in advance

novellino
  • 1,069
  • 4
  • 22
  • 51
  • This might be possible for your case: http://stackoverflow.com/questions/3953662/is-there-a-way-to-output-html-div-to-an-image-using-php – Mahmoud Gamal Nov 25 '11 at 10:52

3 Answers3

3

The button in the example generator is rendered by your browser. It is just a button element which is styled. I don't think you can easily save it using php.

What you could do is create a button generator that accepts parameters and then renders the image serverside (using php) and sends it to the browser for displaying. This rendered image can then easily be saved.

Iljaas
  • 520
  • 2
  • 12
  • Do you have any example of how can I start working on something like this? – novellino Nov 25 '11 at 10:58
  • I would start with this: http://www.php.net/manual/en/book.image.php If you search the web on this you will find examples. – Iljaas Nov 25 '11 at 11:56
  • Well GDLib and Imagemagick + jQuery + .load() function with some get parameters generated in the jquery script storing images in db is not good but storing the settings and fetched them with an id is good –  Nov 25 '11 at 12:31
  • what are the parameters I have to send ? – novellino Nov 25 '11 at 12:56
  • Ok, to correct my previous comment about what to start with: Get a clear mind about what you want to make. to help you get started: You want to make buttons based on some parameters (e.g. color, shape, width length, and so on). You need some user input to get the values for these parameters. These parameters need to be sent to your server, so your script knows what kind of button to create. If you still don't have a clue about what I mean by parameters and how to send these to your server, please start by gaining some basic knowledge before trying to do more advanced excercises like this. – Iljaas Nov 25 '11 at 13:47
  • Ok thanks a lot. No is very clear what you mean by parameters. Thanks. I found an easier way to do it though, throught this link http://www.worldofwebcraft.com/page.php?id=101&t=HTML5_use_php_and_ajax_to_save_canvas_as_png_on_your_server. It uses html5 and canvas but I think for now is what I need. I will look more carefully your suggestions too. thanks again – novellino Nov 25 '11 at 15:04
0

The link you've provided just defines the CSS for the element - you just eed to send this back to the server - via a form or ajax.

symcbean
  • 47,736
  • 6
  • 59
  • 94
0

One approach would be to send the css settings to your server and execute an html renderer which somehow allows you to save a screenshot of the button.

Googling for "html renderer" yields several results, but I can't tell whether any of them offers an API that allows you to easily save images of desired elements.

(Of course, Firefox and Chrome all count as html renderers too).

In the worst scenario, using my approach, you'd have to render the button server side, take an screenshot and use some algorithm to find and cut the button from the screenshot.

I'd say this is a complicated approach overall. I'd go with what Iljaas' says.

Jong Bor Lee
  • 3,805
  • 1
  • 24
  • 27