0

I'm working on a project where I need to develop a system where people can create their own design by choosing from a given list of symbols and images and choose background. I have completed all the parts regarding the dragging and dropping etc. But I'm stucked with previewing the final result in a single image. What I'm currently assuming that I need to get the positions of the elements in my drag-and-drop container (or my canvas) and pass it to a php script (I can work with PHP) and then create a new image using PHP's image library. But its really clumsy and frustrating to me. So I'm here for the advice and suggestion from the experts.

So my question is- "Is there any other ways regarding php or js that I can use to get my desired result?"

Thanks in advance.

maksbd19
  • 3,785
  • 28
  • 37

2 Answers2

0

You sir, are right on target. Some optimization suggestions though are to pass the dimensions as a JSON object, this way you get an array in PHP and you can have multiple objects as well as supplying each images source url.

There are plenty of libraries to handle the actual generation. Some to consider are here http://php.net/manual/en/refs.utilspec.image.php Theres plenty of tutorials available on the subject. I can tell you, you will be using the function imagecopymerge() from GD, and it will make this a breeze. More on this topic here... Merge two images in php

Good luck and enjoy, feel free to comment with more questions.

Community
  • 1
  • 1
CP510
  • 2,297
  • 15
  • 15
  • Thank you very much for your reply. From my previous experiences I found working with images in php is little bit confusing and time consuming as I'm not that much good in it. So I was looking for a easy way out. Anyway I found the idea of canvas is pretty interesting. I'm gonna dig into it. If I can't handle it then I will have to return to php :). Thanks again. – maksbd19 Sep 24 '13 at 18:53
  • It's a great answer but beware of cross-browser support. HTML5 canvases aren't supported in all browsers, you will have issues in IE and Opera, as well as older versions of Firefox, Chrome, and Safari – CP510 Sep 24 '13 at 19:00
0

If you have a canvas you can just get the content of the canvas as a image (in whatever extension you want) in base64 using canvas.toDataUrl(); as in this question:

Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)

Then you can either send it to your server using AJAX or a form submit action (using a hidden field). In the server you can get the image as base64 and decode it into a file to save on the filesystem or just store it using a blob type on a database.

Community
  • 1
  • 1
Hoffmann
  • 14,369
  • 16
  • 76
  • 91
  • OK I got the idea and its pretty interesting. But will it be browser compatible? Like users might not have the modern browsers as well. Thanks for your answer. – maksbd19 Sep 24 '13 at 18:49
  • If the user browser support the canvas tag it supports the .toDataUrl() method. That means IE9 or higher and pretty much all others. As for ie8, 7 and 6 there are some hacks to make canvas tag work on them, but I have never used them (most involve using flash). – Hoffmann Sep 24 '13 at 20:23