0

I've been asked to make a php software were the admin/user can import a certificate of attendance template and then import a list of names, the software should then generate certificate images with the names from the list.

My preliminary idea was that the certificate should be in an image form and have a placeholders to be replaced by the name, for example:

enter image description here

Here we can replace the <Type Person's Name Here> placeholder with the names from the list.

Unfortunately this is all theoretical, I can't just search for the placeholder in a .jpg or a .png file to replace it.

After some research i found that some sites provide certificates templates in a kind of an open standard .ai and .eps both can be opened by Adobe Illustrator and then you find that all the text is editable and you can simply replace the name placeholder, example.

The problem is that both these file types are proprietary and I doubt i can find a php library to edit them easily.

This is very similar to the situation in 20253386, except that the certificate template will need to be changed, if i had only one certificate template then i only need to know the coordinates of the name placeholder and use Imagick::annotateImage but with importable templates I have no idea were the name should be placed based on the certificate design.

So what other options do i have ? are there any open standards to use for image templates ? is there another way to tackle this problem?

MOHAMMAD RASIM
  • 335
  • 1
  • 6
  • 14
  • 1
    I think you're thinking about it the wrong way; images are not strings that you "search these chars, replace with these chars" inside. Load the image then draw a string on top of it and save it. https://www.google.com/search?q=php+draw+text+on+image – Caius Jard May 12 '20 at 22:02
  • might work if you used an SVG image as it is just markup with plain text. – Clint May 12 '20 at 22:10
  • Would PDF documents be OK? I've used [FPDF](http://www.fpdf.org) to do this sort of thing in the past (invoices as it happens, but the same procedure will work). Import a PNG or JPG background image, and add text objects to fill in the details for each certificate. Importing and embedding fonts is easy, and you can create centered text by using the GetStringWidth function. – r3mainer May 12 '20 at 22:42
  • @CaiusJard I know that images can't be searched, that's why i said it's just a theoretical thinking,As I said, writing a text over an image is not possible because I would need to know the coordinates to write the text to, and since the admin/user can design a custom template and import it, I have no way of knowing these coordinates – MOHAMMAD RASIM May 12 '20 at 22:57
  • CSS, use your certificate as a background image and then place the text on the div where the display text should be. You could nest your text divs and use a grid or bootstrap or plain ole CSS. – dale landry May 12 '20 at 23:25
  • Why can the admin not then design the template image and also give a coordinate where the text shall go? – Caius Jard May 13 '20 at 05:36
  • And then , in line with dale's suggestion use something like wkhtmltopdf to turn the html into a pdf – Caius Jard May 13 '20 at 05:37
  • @CaiusJard the users of the app don't play very well with tech (anything beyond clicking buttons is hard for them) I'm guessing they can't even design a template by themselves and will probably use some templates from the internet – MOHAMMAD RASIM May 13 '20 at 22:18
  • @Clint hmm I thought about svg but didn't try it, i thought svg only describes a bunch of lines and where they intersect, apparently they can contain plain text objects in the file so clearly i was wrong, `svg` is so much easier for my client than someother markup languages like html because there are a lot of simple user friendly editors that can export in svg, I will do more tests on `svg` vs `pdf` as suggested by @r3mainer and if I found the svg is better i will ask you to post your comment as an answer so i can accept it as the correct answer. – MOHAMMAD RASIM May 13 '20 at 22:24

1 Answers1

0

I would push the problem of the coordinates onto the user, and devise some simple encoding system for templates images, perhaps using the file name. For example, if you had two files:

CertificateOfAttendance2020 name@200,200 description@200,300 date@100,500.png
CertificateOfEnrolment2020 name@200,200 date@100,500.png

You can parse their names,eg split on space, take the first as the name, split the others on @ and take the first bit as name of field and the second as x,y of where to put it.

show the user the template name part in a picker. When they pick eg Certificate of Attendance, say "this certificate requires three extra bits of info" and put the fields dynamically in your UI:

Name:
Description:
Date: defaulted to today

Or when they pick the enrolment one just show them two fields

Let the user type what they want, use some tool to put those things at the coordinates. It is the person who designs the image that should provide the coordinates. If you're writing a tool for that too then the tool can name the file. Maybe you can have some way of encoding left/right/center align, font size and face.. maybe eventually you'll just put a block of css in the file name, then throw the whole thing out and replace it with an html file describing the most elaborate certificates in the world, and have placeholders inside the html, and the image will just be a background :)

Generating the image, could be an image library like imagemagick, could be you do it as html divs with big image and absolute position then use eg wkhtmltopdf to make it a pdf.. loads of options, and we aren't here to design it for you.. (even though it might look like that's what I've done). The reason why we don't "design your system for you" is that it's fairly subjective what is best and there is no right answer - the method I've talked about above has potentially many flaws that may make it unsuitable for your context. My point is purely that you need to find some way to store/associate the data you need to ask for (name, description) with the image that provides the background and the info that drives where those things shall be placed - I've tried to keep this "answer" full of "could do" and "perhaps" rather than "should do" and as such I regard it really as just an extended comment to a mostly off topic question- there's only one fact here that really makes it an answer (and it's in bold above)

Caius Jard
  • 72,509
  • 5
  • 49
  • 80