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

john_doe

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

john_doe_profile_picture.png

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
https://www.dropbox.com/s/2x8fhtj21zo1uf0/avatar-s-11.png?dl=0

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

awarded to ivankahl

Crowdsource coding tasks.

2 Solutions


Hi,

here is my version :
https://repl.it/join/nsbtpkfp-cyrilkern

It uses, FileSaver, JSZip and jszip-utils. For your information, it won't work on repl.it 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 ( https://web.kern-info.eu/placeholders/index.html) using my own image url ( https://web.kern-info.eu/avatar-s-11.png ) 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 repl.it file system so its local to the code?
Qdev 26 days 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 repl.it environment. Ivankahl solution is great and works so it's ok for you ! And thank you for the tip.
kerncy 26 days ago
Winning solution

Hi,

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 repl.it: https://repl.it/@ivankahl/UserAvatarImages (or go to the actual page here if the ZIP doesn't download: https://useravatarimages--ivankahl.repl.co/)

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 26 days ago
Hi, that's strange. Possibly got to do with the browser you're using. Which browser are you running it in?
ivankahl 26 days ago
Tried Chrome, incognito, and FF
Qdev 26 days ago
Okay I think I see the issue. It doesn't work when the page is embedded in the repl.it page (this is just an issue with repl.it's embedding). You can go straight to the actual web page here and it should work: https://useravatarimages--ivankahl.repl.co/
ivankahl 26 days ago
View Timeline