Share your repls and programming experiences

← Back to all posts
Santa Hat-ifier — easily add a festive touch to any profile photo!
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:

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!

Voters
madison2
BCP
angrydoge
CycoDragon
HYPR
EekulD
AgastyaSandhuja
elburg
FECW
TheJamCoder
Comments
hotnewtop
Coder100

if you're inclined

fuzzyastrocat

@Coder100 Yay santacookie!

Coder100

yay! for some reason I couldn't save it :( @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.

Coder100
Coder100
fuzzyastrocat

@Coder100 Great!

Coder100
[deleted]

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

CodingGoose

@Coder100 u look nice

[deleted]

@Coder100

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

elburg

@poetaetoes

ME TOO!

AgastyaSandhuja

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

fuzzyastrocat

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

SwaroopBappanad

@Coder100 poggers.

ch1ck3n

fuzzyastrocat

@ch1ck3n That works nicely!

elburg
HarperframeInc

Seems to fit alright. Nice Job!

fuzzyastrocat

@HarperframeInc Ha! Thanks :D

ch1ck3n

@HarperframeInc

But can you do this?

fuzzyastrocat

@ch1ck3n Now that is true genius

HahaYes

bruh your projects are top tier quality

EpicGamer007
fuzzyastrocat

@HahaYes @EpicGamer007 Heh, thanks!
noW gIve mE YoUr uPvotEs

[deleted]

It's a wild LOLCAT-

lol @Bookie0

Bookie0
fuzzyastrocat

@Bookie0 @headiscoding Nicely done!

Bookie0
RayhanADev

I was bored:

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

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

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 :)

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.

RayhanADev

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

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

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

JBloves27
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,

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.)

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 :/

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

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?)

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

fuzzyastrocat

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

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

fuzzyastrocat
tussiez

The scale/rotate code is really clever!

fuzzyastrocat

@tussiez Heh thanks!

tussiez
KobeFF

yay i also photoshopped mine :)

before:

after:

fuzzyastrocat

@KobeFF Awesome!

mathiasaboye


santa doggo

fuzzyastrocat

@mathiasaboye Ha! Awesome!

KobeFF

yaaay works :)

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

fuzzyastrocat

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

CodeLongAndPros

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

fuzzyastrocat

@CodeLongAndPros ?

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

CodeLongAndPros

@fuzzyastrocat The joke is that people neglect us Foxers

fuzzyastrocat
JBloves27

poggers

fuzzyastrocat

@JBYT27 Thank you!

JBloves27
DynamicSquid

New pfp! I drew the squid myself with the help of a picture. Is it good? I think it looks a little angry instead of confuzzled. Your santa hat looks great btw!

DynamicSquid

Wait the hat's pointing the wrong way :( How do you rotate an image?

fuzzyastrocat

@DynamicSquid First of all, your drawing is good! (It looks benevolent to me, but I suppose you could change the angle of the eyebrows slightly to look more confused.) My only criticism would be the choice of color for the upper-head area... the red seems a little out of place to me.

What do you mean by rotate? (Do you mean rotate with this tool? What you would want to do is scale it negatively on the X-axis to flip it.)

DynamicSquid

@fuzzyastrocat Oh right yeah. I have it in the right orientation now

CycoDragon

Working as expected.

fuzzyastrocat

@CycoDragon Uh... you know you can move the santa hat, right?

CycoDragon
WILLIAMBAEWER

looking cool joker (also imagine having a student account)

fuzzyastrocat

@WILLIAMBAEWER Glad to know it worked for you! (What do you mean by "imagine having a student account"?)

WILLIAMBAEWER

@fuzzyastrocat nothing, nothing at all (MWHAHAHAHAHAHAHAHA)

DynamicSquid

Hi, quick question. I'm thinking of taking a look at Assembly. I'm on an 64-bit Intel computer, so could I use NASM since it's cross platform? And if I use NASM for my assembler, I would need to learn Intel x86 right?

fuzzyastrocat

@DynamicSquid Yes, you could use NASM. And yes, if you use NASM you'll need to learn the joke that is Intel syntax not the god that is AT&T syntax.

DynamicSquid

@fuzzyastrocat Ah okay. What about for Ubuntu? If I use NASM on Ubuntu, will it be the same Assembly syntax?

fuzzyastrocat

@DynamicSquid NASM is NASM. If it's not the same, it's not NASM. (It'd be like if using Rust on a mac was different syntax than using Rust on a wandows.)

Now, that's not to say that there might be some different semantics, because at that level different OS's can change how you do things. But the syntax will stay the same.

DynamicSquid

@fuzzyastrocat Ah okay, thanks!

elburg


Nice, gonna set this as my pfp!

fuzzyastrocat

@elburg Awesome!

CyberHacker101
CyberHacker101

It looks stupid but thxs for making this

fuzzyastrocat

@CyberHacker101 Heh thanks!

AverseABFun

I'm on chrome and I can't download. But you an right-click and click save as to save.

fuzzyastrocat

@AverseABFun Hm, I'm on chrome and I can. What OS are you on?

AverseABFun

@fuzzyastrocat Chrome OS

fuzzyastrocat

@AverseABFun That's most likely the issue then, others with chromeOS have reported it not working. I don't know why it wouldn't, since I'm just using standard browser APIs, so clearly chromeOS does something different.

Codemonkey51

Hi, cool project (except saving doesn't work, pls fix (iOS))

Here is my pfp after holiday-ifying it: (yes, I didn't just add a Santa hat)

fuzzyastrocat

@Codemonkey51 I'm sorry, but that's likely an issue with your browser that I can't fix. Saving has been confirmed to now work on all modern browsers (after several fixes from things that "should" work, which was annoying enough), so could I get your browser (and if it's Safari, is it an old version?)

Codemonkey51

I'm on a really recent version of iOS (so also safari), not really an old version. I could tell you the exact version, but I would rather say that like in a repl not public ally on repltalk (:/) @fuzzyastrocat

fuzzyastrocat

@Codemonkey51 Yeah that's ok. I'm not exactly sure what the issue is then — I'm using standard accepted browser APIs, so it should work on any modern browser. (Perhaps the issue is iOS handles saving files differently?)

Codemonkey51

The issue is it doesn't capture the full image
For example this happend:

@fuzzyastrocat

fuzzyastrocat

@Codemonkey51 Huh, that's really odd and I can't think of why that would happen (since it doesn't do that anywhere else).

BraidenLowe

wish you could rotate it, but it works well!

fuzzyastrocat

@BraidenLowe You can rotate it! Just click and drag the circle on top of the image.

BraidenLowe

@fuzzyastrocat
Thanks! Now I know that it looks more natural without rotating it!

[deleted]

how about this?

fuzzyastrocat
[deleted]

zoom

[deleted]

angrydoge

Hmm now its downloading to the left of the image (im on chrome, chrome OS)
Edit: Yo! It works on firefox!

fuzzyastrocat

@dabombdgdzjr Yeah, seems like chrome + chromeOS doesn't work. Also uh... not sure what to say about that image so I'll just say nothing :D

angrydoge
CodingGoose

Haha this is great!

fuzzyastrocat
Trex10

My thingy ^
EDIT: oops I pointed to my one upvote I meant my profile pic.

fuzzyastrocat

@Trex10 Awesome!

JackFranzel

does the image have to be in a specific format, like jpeg or png, or can it be anything

fuzzyastrocat

@JackFranzel Any image format that the web can render is accepted! (Though it doesn't work with gifs, since those are animated and that's a lot more complex.)

JackFranzel

ok thats weird, its just not loading for me ig
@fuzzyastrocat

coolTiger33

cool

fuzzyastrocat

@coolTiger33 Thank you!

Baconman321

How do you get it to download? I didn't know you could download things in JavaScript?

fuzzyastrocat

@Baconman321 It's... complicated, and probably not worth explaining here. (But of course you can download things with JS, you've seen websites which download things right?) However there's an easy tool for it: FileSaver.js.

Baconman321

@fuzzyastrocat is that what you did? Honestly, you could just create an iframe with application/octetstream (or something like that), create the headers with the blob file, and boom you download a file. Someone I collaborate with uses an <a> link and uses JavaScript to click it, then removes it. (I did some research, yeah).

fuzzyastrocat

@Baconman321 And boom, you have tons of browser incompatibilities. I tried that method (both actually), and it failed on most users' browsers. That's why there's been so many issues with downloading here.

Baconman321

@fuzzyastrocat Should work, just make sure you have the right headers for each browser. Yeah, I remember reading about how in the beginning JavaScript was so different there websites saying "Works best with IE" or "Works best with Navigator". They really should make browsers more compatible with each other.

fuzzyastrocat

@Baconman321 I put all the cross-browser stuff in, and it didn't even work on my own browser. Yes, browser incompatibility is extremely annoying since it just makes the developer's job infuriating.

Baconman321

@fuzzyastrocat At least it wasn't as bad as back in the 1990's XD. I used backend for mine, and I opened a tab with a header that downloaded the file. Ez.