Skip to content
Sign upLog in
This post is read-only. Explore Repls and connect with other creators on Community.View Community
The info in this post might be out of date, check out our docs instead. View docs
58

Santa Hat-ifier — easily add a festive touch to any profile photo!

fuzzyastrocat
fuzzyastrocat

It's that time of year when people decide to randomly throw a santa hat on their profile photo. So I decided to make a tool that allows you to easily add this festive touch to your profile photo (or any other photo, for that matter)!

But how can I get in on the fun?

Just go to the link, hit "Upload Photo", and upload your photo. A moveable, scalable, stretchable, rotatable santa hat will appear — drag it anywhere over your photo and position it as you like. Use the dot on the boundary to scale/stretch the hat, and use the dot above the image to rotate it. Finally, hit the "Save!" button to save your image!

Note that only the region inside of your image will be saved — so if you stick the santa hat outside the image's boundaries, it'll get cut off or won't show up.

Cool! But is it really good?

Proof that it works: I made my seasonal profile photo with it! :D

UI snapshot:

Screen Shot 2020-12-10 at 12.02.19 PM

Fullscreen here! Must open in fullscreen for file download!

EDIT: There's been a recurring issue with saving files, however it has been fixed for most systems. If this is still the case for you, and you've opened the repl in a new tab, it's a browser/system incompatibility.

Hope you enjoy!

2 years ago
You are viewing a single comment. View All
3
1
fuzzyastrocat
fuzzyastrocat

@RayhanADev
Weird, first it was images not saving and now images aren't being fully saved. I have no idea why that would be happening, I can't replicate. Could you give your browser + OS? grr these incompatibilities are really frying me

Also yes, if the picture would save correctly that works really well :D

2 years ago
1
RayhanADev
RayhanADev

@fuzzyastrocat
xD Yeah, I did it with Safari on my iPad with Desktop Mode on so take what happened to me with a grain of salt because things are supposed to be messed up here :)

2 years ago
1
fuzzyastrocat
fuzzyastrocat

@RayhanADev
Ah ok safari is most likely the issue. It usually doesn't keep very up-to-date with web technologies and there's a lot of (way too many) APIs involved in a simple file download.

2 years ago
1
RayhanADev
RayhanADev

@fuzzyastrocat
yep! I seriously wonder why I don’t use chrome, my computer uses edge with bing

2 years ago
2
BobTheTomatoPie
BobTheTomatoPie

if you mean the pictures download on the click of the button save, repl talk always removes downloads to protect people, thats prolly why it isnt downloading

@fuzzyastrocat

2 years ago
1
fuzzyastrocat
fuzzyastrocat

@BobTheTomatoPie
Ah, that would do it. I don't get why so many people always use the embedded thing and not go to a separate tab, so I never thought about that. I'll update the post

2 years ago
1
xxpertHacker
xxpertHacker

@fuzzyastrocat
I've let others use my downloaded code, which uses... 3 APIs, how many do you use?

I used the Blob API, the DOM API, and the URL API; I can't see it taking any more than that,

2 years ago
1
fuzzyastrocat
fuzzyastrocat

@xxpertHacker
I use the blob API, the URL api, DOM API, xhr API, FileReader API, maybe more. A lot of them aren't strictly necessary, but are needed to increase browser compatibility. (Most of those are contained in FileSaver.js, the new system I switched to.)

2 years ago
1
xxpertHacker
xxpertHacker

@fuzzyastrocat

...xhr API, FileReader API, maybe more.

Okay, okay, the FileReader I guess could make sense, since iirc, Chrome 70 has the Body prototype methods to directly get the data, but the XHR API!?

Chrome and Firehox ~40 had fetch:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API#Browser_compatibility

That's well over 3 years, at least.

That's at least a 2016 browser :/

2 years ago
2
BobTheTomatoPie
BobTheTomatoPie

even if you go to the embedded thing they block it, it only works on a repl that isnt on talk yet, so in order for ppl to do it they have to fork the repl

@fuzzyastrocat

2 years ago
1
fuzzyastrocat
fuzzyastrocat

@BobTheTomatoPie
This doesn't occur for me, so that must not be entirely true. (You're going to https://santa.fuzzyastrocat.repl.co right?)

2 years ago
2
BobTheTomatoPie
BobTheTomatoPie

yep, i believe maybe the download works for you as you are the creator but for everyone else it might not due to the repl talk post, as it still wont download for me

@fuzzyastrocat

2 years ago
1
fuzzyastrocat
fuzzyastrocat

@BobTheTomatoPie
Well no, not necessarily, since most people seem to be able to download it fine now.

2 years ago
2
BobTheTomatoPie
BobTheTomatoPie

yea they gotta go to a seperate link tho and most ppl dont read descriptions so most wont notice it works which sucks good job on the project btw

@fuzzyastrocat

2 years ago