-4

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?

Gareth Watson
  • 29
  • 7
  • 1
    Images are just bytes, and if you encode them in the right format and send it over HTTP then a browser will display it. Look at the URL when you open the image in a new tab – Jamiec Jan 12 '22 at 16:45
  • Thank you for replying @Jamiec. When I look at the URL for the image it is near identical to any URL with a series of query strings at the end. I just can't understand how this is then physically used by an image to create the content of that image. Is there some sort of convention being used here that I just haven't come across in my travels yet? I don't want someone to tell me how to do this exactly. All I want it a pointer in the right direction. – Gareth Watson Jan 12 '22 at 16:50
  • Its just an API endpoint like for example one that would return JSON - except its returning a series of bytes encoded as an image – Jamiec Jan 12 '22 at 16:51
  • Assuming nodejs is your bag: https://stackoverflow.com/questions/5823722/how-to-serve-an-image-using-nodejs – Jamiec Jan 12 '22 at 16:52
  • or .net: https://stackoverflow.com/questions/186062/can-an-asp-net-mvc-controller-return-an-image – Jamiec Jan 12 '22 at 16:53

1 Answers1

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.

Robert J. Walker
  • 10,027
  • 5
  • 46
  • 65