5

I've scoured Google and Stackoverflow and can't seem to come up with a definitive answer.

I'm wanting to create an image from a particular bit of content. So I've got a div which I've added images, text, background colours etc. to and I'm wanting to save out that DIV as an Image. I've read on GD and how to create each individual bit, like creating the canvas first, filling it with a colour, rendering the fonts etc... What I'm wondering, is there not an easier way? It seems like a straight forward task but I appreciate it's not. Are there any libraries that you could recommend that will aid this? Rather than having to go through rendering each image, each bit of text and each colour on the canvas..

Thanks

christian.thomas
  • 1,122
  • 1
  • 8
  • 19
  • Sounds complex, wish I could be of help. +1 – alt Aug 17 '11 at 22:17
  • Very complex. A miniature screen snapshot. Good question. +1 – Jonathan M Aug 17 '11 at 22:18
  • Google uses this technique to highlight the searched text on it's instant preview. Seems to be very complex to achieve. Sample at [http://i52.tinypic.com/16a44ub.png](http://i52.tinypic.com/16a44ub.png) – Pedro Lobito Aug 17 '11 at 22:24
  • @christian.thomas: What are you trying to achieve? Maybe there's an easier way. – Jonathan M Aug 17 '11 at 22:24
  • 1
    I want to be able to allow the users, to create essentially a little advert. Kind of like an editor. Users have a blank "canvas" 600px x 200px or whatever, and they can add various bits of content to this canvas. Text, Colours, Images etc. So they end up with an advert or image from what they've input. – christian.thomas Aug 17 '11 at 22:27
  • @christian.thomas: So essentially an online image editor? – Marcel Aug 17 '11 at 22:32
  • Essentially, yes. Though I'm looking to go down an alternative route than the traditional Flash option. – christian.thomas Aug 17 '11 at 22:34

3 Answers3

3

PHP has no idea what your page looks like.

That's stuff a browser / user-agent does (rendering HTML).

Check out: Website screenshots using PHP

Community
  • 1
  • 1
PeeHaa
  • 71,436
  • 58
  • 190
  • 262
  • Thanks PeeHaa, wkhtmltopdf is looking like the best option at the moment. Will accept your answer shortly if there's no other feedback – christian.thomas Aug 17 '11 at 22:33
  • I'm going to try a combination of different tools suggested in the thread above. Will try and get wkhtmltopdf working effectively. If that fails, imagescreengrab and crop the image with GD. If that fails, I'm going to use file_get_contents to save a wimg.ca image as in http://wimg.ca/http://stackoverflow.com/questions/757675/website-screenshots-using-php Thanks for all the suggestions guys, appreciate it. – christian.thomas Aug 17 '11 at 23:34
1

A div is not an image. In real world terms, it's a plastic bag you put groceries into. What you want is a <canvas> object, the contents of which can be captured as an image using various javascript functions.

Marc B
  • 356,200
  • 43
  • 426
  • 500
  • @christian.thomas: But `< canvas >` is only HTML5, and minimal browser support, FYI. – Jonathan M Aug 17 '11 at 22:20
  • These were my thoughts. I used a DIV because it was straightforward to add elements, images etc to this DIV. I thought I was home and dry from this point, should have done more research! :( – christian.thomas Aug 17 '11 at 22:23
  • @christian.thomas: Unless the make-up of these ads is very inflexible and is handled by a few form elements for input to build up the image, this is going to be very hard to achieve without disregarding old browsers and using newer technology (and acquiring currency?). – Marcel Aug 17 '11 at 22:52
1

If you're looking for an online image editor to lay up ads, svg-edit may suit your requirements. This should get you most the way there.

There's a few services around too that do the job and you may even be able to leverage as a 3rd-party tool. I'm sure you can also appreciate their complexity.

Marcel
  • 27,922
  • 9
  • 70
  • 85