PHP Developers Network
http://forums.devnetwork.net/

Is This How They Build Online Greeting Cards ?
http://forums.devnetwork.net/viewtopic.php?f=1&t=145248
Page 1 of 1

Author:  UniqueIdeaMan [ Mon Jan 01, 2018 3:07 pm ]
Post subject:  Is This How They Build Online Greeting Cards ?

Happy New Year!

Folks,

Have you seen those online greeting cards, where you choose a template (like a bunch of people holding a big white empty sign board) and whatever you type in the "greetings" text box then that shows-up in the image (your typed text shows up in the sign board) ?
How did they program all that with php ? I mean, they did some kind of a text layout on the img, right ?
We've done this kind of thing in Adobe Photoshop but how does php manage it ? Does php have some builtin function that deals with overlaying one img or text over another img ? Img overlaying ? if not, then how'd they manage to program it ?
If you don't mind, I'd like to see a code sample from your end. That can be my new year gift!
I think the programmers do it like the following technique. See if I'm correct or not ...

They cut the template img in half. So, in our example, the bunch of people holding the empty white signboard is one whole img. Like: full.jpeg.
With phptoshop and the like, the webmaster cut the img in 2. Half half.
Like: left_half.jpeg & right_half.jpeg.

Now, let's deal with you the user's input text and its img.
With a font, let's say Ariel Style, I, the programmer, going to write each letter and save it. Like so:


a.jpeg
b.jpeg

and so on right down to:

y.jpeg
z.jpeg

Then, I'm going to give you, the visitor/greeting mssg creator a text box (in a web form).
You will type your word such as: Happy New Year 2018.
And, my script will call the required jpeg files and combine them to form your word. Like so:

h.peg,a.jpeg,p.peg,p.jpeg,y.jpeg and so on.
You get the picture. Gonna put each appropriate img files side by side that will make up your chosen word.

Eg.


$word = $h = mydomain\h.jpeg.$a = mydomain\a.jpeg; AND SO ON until your word is formed: Happy New year 2018.

//combine left half of img with right half of img with greeter's $word inbetween the 2 imgs.
echo left_half.jpeg.$word.right_half.jpeg; //concatenation taking place here.


Is this how the php programmers build these greeting card sites ? Meaning using the same method I did. Ok, maybe programming slightly differntly by using better codes but the method of adding the greeter's greeting words on the image template is done like so. Right ?

Don't forget to PM me your emails so when I get this Greeting Card site of mine up and running then I can give you all a card. Lol!

Author:  thinsoldier [ Mon Mar 12, 2018 11:00 am ]
Post subject:  Re: Is This How They Build Online Greeting Cards ?

1. Learn the basics of graphics programming on Khan Academy.

2. Take that knowledge over to either raw html5 canvas api or processing.js or p5.js - I assume you already have basic javascript & DOM knowledge or at least jQuery.

3. Make a simple web page where you give the user 5 photos to choose from and a text box and an html5 canvas.

4. The image with text that is created in the canvas element can be uploaded via ajax/xhr/xhr2/fetch

Author:  Christopher [ Mon Mar 12, 2018 10:01 pm ]
Post subject:  Re: Is This How They Build Online Greeting Cards ?

Thinsoldier is right, not even close. It is not done with PHP. It is done with Javascript.

Author:  thinsoldier [ Mon Mar 12, 2018 11:02 pm ]
Post subject:  Re: Is This How They Build Online Greeting Cards ?

You could do it with PHP but I'm pretty sure some aspects of advanced functionality like having a lot of fonts to choose from or performance concerns like having to process 10,000 users requests server side, make javascript & canvas in the browser a significantly better choice.

Author:  PeeZo [ Mon Mar 12, 2018 11:34 pm ]
Post subject:  Re: Is This How They Build Online Greeting Cards ?

Christopher wrote:
Thinsoldier is right, not even close. It is not done with PHP. It is done with Javascript.


Upon checking, that's Javascript they're using

Page 1 of 1 All times are UTC - 5 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/