Santa Hat-ifier — easily add a festive touch to any profile photo!
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
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!
@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.
@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
...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:
That's well over 3 years, at least.
That's at least a 2016 browser :/
@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.)
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?
@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.
@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?)
@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