Create placeholder avatar images based on list of names
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have a list of names like

John Doe

Sally Smith

100-500 rows

I need some js that will be able to take the list of names (new name per row of text area) and it will slugify (handle symbols, convert to lower, spaces replaced with _ etc.. ) the names like John_Doe and then output an image for each of the names like


and then give us an image with the proper name like this


I dont think the browser can dump out a bunch of images at once but I think it can maybe output a zip if we had a couple hundred images.

here is the placeholder to use as the base image

Please post solution to so we can test it and run it.

awarded to ivankahl

Crowdsource coding tasks.

2 Solutions


here is my version :

It uses, FileSaver, JSZip and jszip-utils. For your information, it won't work on because of a CORS issue when trying to download the image (Dropbox doesn't allow request from different origin).

I installed the file on my own server ( using my own image url ( ) for demonstration, and you can see that it works. To make it work on your side, you will have to host your image on the same server where your script will be running.

Do not hesitate if you have any questions.

Hey what if we just load the image from the file system so its local to the code?
Qdev over 1 year ago
I tried to manage with local file, this now works, but the zip won't download. Sorry but I'm not sure what happened when you are in the environment. Ivankahl solution is great and works so it's ok for you ! And thank you for the tip.
kerncy over 1 year ago
Winning solution


I've worked on a solution in Vanilla JS that makes use of JSZip and FileSaver.js to generate a ZIP file containing profile pictures for each line in the textarea. All the code for generating the avatars is contained in the UserAvatars.js file. I have tried to make it simple and easy to read. Here is a working demo on (or go to the actual page here if the ZIP doesn't download:

Simply enter each name on a new line in the text area. The script will then 'sluggify' the name and generate a profile picture using the slug in the name. This profile picture is added to a ZIP file which you can then download.

As a bonus, you can also specify the URL of the profile picture that you would like to use as the base profile picture. This is defaulted to the profile picture that you uploaded to Dropbox but you can change it.

Please let me know if there are any issues or any enhancements that you require.

Thank you!

hey there, i was tyring to run it and for some reason when i click generate zip nothing happens? any ideas?
Qdev over 1 year ago
Hi, that's strange. Possibly got to do with the browser you're using. Which browser are you running it in?
ivankahl over 1 year ago
Tried Chrome, incognito, and FF
Qdev over 1 year ago
Okay I think I see the issue. It doesn't work when the page is embedded in the page (this is just an issue with's embedding). You can go straight to the actual web page here and it should work:
ivankahl over 1 year ago
View Timeline