What technique is used to code a dynamic number plate generator?

I wish to create a utility that allows people to enter their number plate, select various options and then to see their number plate generated in real time.

Essentially this: https://www.ukregplates.co.uk/number-plate-builder

My initial thought was to build the plate as a HTML element and to change the elements dynamically using javascript. I think this is a perfectly serviceable approach to take.

However upon inspecting element and viewing the source code on the site above it looks like the image is being dynamically changed based on selected options. Specifically the choices being made affects the image src attribute which is what seems to generate the image. I can actually open the image in a new window and/or download it.

This would not be possible with the pure HTML/CSS/JS approach.

I have tried Googling to find how this is done. I've looked in Github and searched Stack Overflow but I need to finally admit defeat on this one.

Can anyone shed any kind of light on this for me please?

Solution 1:

The image you are referring to is being generated server-side, not client side. It is sending a request to the server with the parameters describing what it wants, and a server-side process is generating the plate image and returning it. There is nothing stopping you from generating images client-side, however. The Canvas API provides a mechanism for generating graphics on the client, and various JavaScript libraries exist to facilitate this.