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

Voters

Comments

TopNew
18
Coder100
Coder100

image

if you're inclined

2 years ago
1
fuzzyastrocat
fuzzyastrocat

@Coder100
Yay santacookie!

2 years ago
1
Coder100
Coder100

yay! for some reason I couldn't save it :(

@fuzzyastrocat

2 years ago
2
fuzzyastrocat
fuzzyastrocat

@Coder100
Try again. That was a known issue (which was written in bold on the post) which appears to have been with the way I was saving the image (not compatible with all browsers). It may or may not be fixed now; I think I've fixed it but I haven't gotten any feedback from anyone so I can't confirm this.

2 years ago
1

@Coder100
heavy breathing you do know santa eats cookies, right

2 years ago
3

@Coder100

** WAIT WAIT. I JUST NOTICED THAT UR COOKIE HAS A SMILEY FACE**

2 years ago
1
AgastyaSandhuja
AgastyaSandhuja

all the little bois and girls get cookies in their stockings :D

@Coder100

2 years ago
2
fuzzyastrocat
fuzzyastrocat

@AgastyaSandhuja
Stale, hard, half-of-it-was-eaten-by-the-dog cookies since they've been sitting there all night :)

2 years ago
1
Classfied3D
Classfied3D

@PikachuB2005
but it’s not christmas

3 months ago
1
PikachuB2005
PikachuB2005

@Coder100
It was an accident, sorry. I didn't mean to reply to an old comment.

3 months ago
5
techpixel
techpixel

Seems to fit alright. Nice Job!
image

2 years ago
4
HahaYes
HahaYes

bruh your projects are top tier quality

2 years ago
3
RayhanADev
RayhanADev

I was bored:
santa-hat

Edit: HAHAHAHHAHAHHAHAH LMAO THAT PIC CAME OUT GREAT XD Here’s a screenshot of what I did:

C689D096-D56C-4084-8CB9-60E0660E24CA

2 years ago
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
2
tussiez
tussiez

The scale/rotate code is really clever!

image

2 years ago
2
KobeFF
KobeFF

yay i also photoshopped mine :)

before:

image

after:

image

2 years ago
2
KobeFF
KobeFF

yaaay works :)

image

Also

@fuzzyastrocat
save function works fine (at least on my school chromebook lmao)

image

2 years ago
1
fuzzyastrocat
fuzzyastrocat

@KobeFF
Yeah it should work fine for people with modern browsers.

2 years ago
1
CodeLongAndPros
CodeLongAndPros

@fuzzyastrocat
BuT oF cOuRsE fIrEfOx Is NoT mOdReN aNd No OnE uSeS iT.

2 years ago
1
fuzzyastrocat
fuzzyastrocat

@CodeLongAndPros
?

Does it not work in FireFox? That's odd... it should work fine.

2 years ago
1
CodeLongAndPros
CodeLongAndPros

@fuzzyastrocat
The joke is that people neglect us Foxers

2 years ago
Load more