Skip to content
← Back to Community
πŸ–Ό Image Filter! πŸ”
Profile icon
KobeFF

πŸ–Ό Image Filter! πŸ”

This nifty little project made by moi, will allow you to upload a photo and set it under a filter! I was playing around with CSS when I discovered from W3Schools that you can do cool stuff with images. With some help from @DrIcy, I got it so that you can upload photos. I was going to make it all in one page, but found out that you couldn't remove classes from HTML elements, so I had to make separate HTML pages and put filters of each images in different pages. The stupid javascript and This file cannot be displayed: tag sadly did not allow me to make multiple displays of the same image so I couldn't make like a 'gallery' of the same photo with different pictures.


Anyways, this image filter has some really cool and CRAZY filters! For example, you can have an image like this...

image

and putting through the Saturation filter, you can get something like this:

image

WOW! Orange mushrooms! On the other hand, if you put it through the Invert filter...

image

Cool, right!? Who doesn't like weird glowie mushrooms?


Be shore to leave an updoot if you liked this project! Bai :)

Voters
Profile icon
supranavkishore
Profile icon
Kdo12
Profile icon
LucasTeel
Profile icon
AllyLin1
Profile icon
jordiebridges
Profile icon
BananaJellyfish
Profile icon
Whippingdot
Profile icon
tankerguy1917
Profile icon
Hopevs
Profile icon
glitchish
Comments
hotnewtop
Profile icon
ch1ck3n

image

Profile icon
TsunamiOrSumth

very cool

Profile icon
KobeFF
Profile icon
HairyPotterDude

yay nice

Profile icon
tussiez

glowing mushrooms

Profile icon
tussiez

@tussiez take my upvote

Profile icon
BobTheTomatoPie

I would suggest you upload the image and add some radio sliders that update on change to show the effect of that filter, and it would be cool if instead of using just images you could conect it to your camera, im not 100% sure the code to connect the camera but i know its only a couple of lines and not hard at all as i have dont it before

Profile icon
KobeFF

@BobTheTomatoPie I wanted to do that lmao but I'm pretty sure its been done before on We3Schools.

Profile icon
BobTheTomatoPie

of course its been done before, but this has probably been done before as well, the real thing would be you make it differently than how it was made on w3schools, you make it better and different with the same purpose @KobeFF

Profile icon
joshinso

Fun fact you can see glowing mushrooms in real life with mushrooms :3

Profile icon
tankerguy1917

mmm...uh...mmm...how do i do display a picture in a comment?

Profile icon
elipie

ayyy, r u from wisco? (def didn't look at your school)

Profile icon
KobeFF

@elipie lmao yes madison, wi

wut bout u hehe

Profile icon
KobeFF

@elipie :( where tf is 'Era Dev'???

image

lamo

Profile icon
elipie

@KobeFF era dev. is my business ig. I am golda meir school upper campus, milwaukee wisco

Profile icon
KobeFF

@elipie rly u live in wisco too?

Profile icon
elipie
Profile icon
KobeFF

@elipie yay wisco buddies!!

Wut city wanakee? me live in madison
Profile icon
elipie

@KobeFF

wanakee??

tf is wanake lol. It is milwaukee

Profile icon
KobeFF

@elipie o wanakee is another city close to madison

hehe cow dairy product buddies

Profile icon
elipie

@KobeFF

when you forget how to use smol text
Profile icon
Baconman321

@KobeFF I live in minnesota :D

Profile icon
elipie

@Baconman321 enemies cool :D

Profile icon
Baconman321

@elipie Don't worry, I don't like football, so we cool. Besides, vikings suck (rlly), and I think wisconsin is really cool. Of course, it could use some more farmlands, but the woodlands is really nice (I love wisconsin and minnesota).

Profile icon
elipie

@Baconman321 yay! a good minnesotaer? person.

some more farmlands

Have you drove all the way across wisco? lmao. Does not need one more. Needs less, but farms good doe

Profile icon
Baconman321

@elipie Farms in wisconsin are like farms in norway, I have driven to appleton (the farthest I have gone), and I see 30-acreish farms. Not big, but yeah you guys need some prairie (not too much, ur farmlands are great don't evr lose dem)

Profile icon
elipie

@Baconman321 ye, the huge ones are up north, maybe even by minnesota.

Profile icon
Baconman321

@elipie Oh... KEEP UR WOODLANDS THEN!!!!!! NUUUU DONT DESTROY DEM THEY BUTIFUL

Profile icon
elipie
Profile icon
KobeFF

@elipie lol

my cuzins live in mini-soba :)

Profile icon
elipie

@KobeFF
mini soda

Profile icon
KobeFF

@elipie XD in the united racks of the fridge

Profile icon
angrydoge

@elipie I think you meant

def didnt_look_at_your_school: None
Profile icon
Bookie0

Screen Shot 2020-12-16 at 1.38.08 PM

blue baguette

lol pretty cool, what about adding examples for each mode so we can know what to expect in the first menu page, and maybe also a button to go back once we finish! :D

Profile icon
KobeFF

@Bookie0 Sure! ill make some changes after school today.

i luv blu baguettes. Bloo mushroom better tho

Profile icon
Bookie0

@KobeFF

aight cool!

i luv bloo mushroom. Blu baguettes better tho

Profile icon
KobeFF

@Bookie0

Bloo mushroom op

blu baguettes = poop smear
Profile icon
Bookie0

@KobeFF

non
*in french accent
WIZ ZE POWER OF ZE BAGUETTE, I DECLARE IT IZ SOUPEIOR!

Profile icon
KobeFF

@Bookie0 lmaoooo

Profile icon
Bookie0

oui oui @KobeFF

Profile icon
KobeFF

@Bookie0 whats french for buttocks

Profile icon
Bookie0

@KobeFF les fesses

Profile icon
Bookie0

This nifty little project made by moi,

ooooooOOOoooooooOOOOoO

using from fancy French lmfao! xDD

Profile icon
KobeFF

@Bookie0 lmaooo im like, 100000% french btw

Profile icon
Bookie0

@KobeFF lol yaaay un autre français? I'm also french yeee

Profile icon
KobeFF

@Bookie0 no im not actually french tho XD

wut bout U

Profile icon
Bookie0

@KobeFF saddd
I actually am and can actually speak fluently Français!!!

Profile icon
elburg

don't know how to upload a file but looks really cool!

Profile icon
KobeFF

@elburg when u click o a filter, an 'upload file' button will appear at the top right.

Profile icon
elburg

@KobeFF I found out! It turns out, your window can't be small to else the button doesn't appear at all!

Profile icon
KobeFF

@elburg yeah, you need it in full screen mode.

Profile icon
Baconman321

Lemme guess, u uploaded it to a canvas, and put a background against it (or something like that). I read about it in a html5 canvas tutorial. Yeah, nice! I was thinking of doing something like this with canvas, but wasn't interested...

Profile icon
KobeFF

@Baconman321 naw i used the css .filter into the userimages. it was alot more simple like that.

Profile icon
Baconman321

@KobeFF Ah. I use blur a lot :> I'm making a portfolio rn (don't go to it plz, unfinished then it spoils surprise, instead watch for it in share), that when a usr scrolls to a certain div containing info about one of my projects, it gives a blurred pic of that project.

Profile icon
KobeFF
Profile icon
Baconman321

@KobeFF As u said for me stargaze (ye, it's paybac time), this is really nice, it should deserve to be on trending (even if it's low effort). Uhm, but to make it more rewarding, try making it so u can save pictures, and try doing other things like sepia (try using sepia color with the canvas trick I was talking about). I think I can share the PDF (since it's from stackoverflow and they give perms for you to share the PDF for educational reasons). Do u want it?

Profile icon
KobeFF

@Baconman321 wait wut how do i make it save lmao i barely don't even know javascript. I literally had to get the upload file from geeks for geeks lmao.

Profile icon
Baconman321

@KobeFF Canvas has the ability to save whatever's on it as an image. You would have to get help from fuzzyastrocat as he made the santa's hat that downloaded what was on the canvas.

Profile icon
JBloves27

rly cool!

Profile icon
zplusfour

Soooooo bright ahhhhhhhhh my eyes aa

Profile icon
KobeFF

@ZDev1 lol like a lunar eclipse

Profile icon
JBloves27
Profile icon
zplusfour

@KobeFF haha

Profile icon
RolandJLevy

Hey @KobeFF, nice project :)

Profile icon
KobeFF

@RolandJLevy Thanks!

Profile icon
CodingGoose

Cool!

image

Profile icon
Whippingdot

The only good one:

image

Profile icon
JBloves27

lol, nice! @Whippingdot

Profile icon
Whippingdot

eyyy, is there a new follow button or smthing. You are commenting on all my posts and I am happy someone is noticing me . BTW do you have github? I want to invite you to the org for repl.it coders. When you join it says I can see your IP, tho when I asked in github community, that person said you can not change that feature. He said the IP is in the audit log, but when I looked there I could only see countries. I promise I am not lying, and you can go here and go to maxyang's comment to see proof. Scroll down. @JBYT27

Profile icon
JBloves27

XD glad you're happy! I dont have GitHub yet (the power of yet XD), ill make one soon and ill tell you my username. :D I also see that you're not lying. @Whippingdot

Profile icon
Whippingdot

yes the power of yet Yayyy!!! Me happy. Also, I don't know why I am asking you, but do you know any programming language which is not too popular but is still good. I use Python, C++, and HTML. I am learning CSS and JS and going to learn Nodejs. All the languages I have said above are popular so please give me a recommendation. @JBYT27

Profile icon
KobeFF

@Whippingdot try out nim or ruby... those are cool languages that are still supported by repl.it ide.

Profile icon
JBloves27

LOL, np. Well, I don't know the PL, but R? That would be a good recommendation as it is not too popular but still used. I hope this helps! :D @Whippingdot

Profile icon
Whippingdot

@JBYT27 @KobeFF we famous

image

I think I am going to try out ruby. Sorry JBYT27.

Profile icon
KobeFF

@Whippingdot ooooo repl.it fAmOuS

ps i use ruby too am im rly good at it :) its one of my fave languages.

Profile icon
Whippingdot

Do u use it for web dev? @KobeFF

Profile icon
KobeFF

@Whippingdot you can (backend) but i use it like python.

Profile icon
gwynethwingell

it was nice

Profile icon
FloCal35

I love glowie mushrooms and updoots

Profile icon
FlaminHotValdez

Does anybody wanna guess what this is

radioactiveapple

Profile icon
KobeFF

@maxyang The underside of a bagel on a wooden table!!!

Profile icon
TsunamiOrSumth

@KobeFF mushroom :pepehands:

Profile icon
KobeFF
Profile icon
FlaminHotValdez

@KobeFF Nope. It is wood though, just not a table

Profile icon
FlaminHotValdez

@TsunamiOrSumth KobeFF is a mushroom, but the picture isn't

Profile icon
fuzzyastrocat

@maxyang Looks like an apple, no? Perhaps an apple sitting on a wood floor?

Profile icon
FlaminHotValdez

@fuzzyastrocat Ayyyy you got it it was an apple! On a wood floor too

Profile icon
Whippingdot

How in the world is that an apple? @maxyang

Profile icon
FlaminHotValdez

@Whippingdot filters

Profile icon
Whippingdot

man, you have some good ones. @maxyang

Profile icon
FlaminHotValdez

@Whippingdot that's from this website -_-. And yes, I did change my username because I'm addicted to FLAMIN HOT VALDEZZZZZZZZ

Profile icon
Whippingdot

WHAT IN THE WORLD. HAVE YOU GONE CRAZY BOIIII. i was soo confused who you were. Why did you change your name, now you can't change it anymore and people will @ mention your wrong name. Jk, you can do whatevery you want, but personally I think that was a bad choice. @FlaminHotValdez

Profile icon
FlaminHotValdez

@Whippingdot Ya ya I get it... but I was always obsessed with the HOO series and I finally figured out a way to change my username

Profile icon
Whippingdot

I have no idea what your username even is @FlaminHotValdez

Profile icon
FlaminHotValdez

@Whippingdot oof, read percy jackson books

Profile icon
Whippingdot

I did, I must've forgotten. @FlaminHotValdez

Profile icon
FlaminHotValdez

@Whippingdot what about heroes of olympus

Profile icon
Whippingdot

I have read that too. @FlaminHotValdez

Profile icon
elipie

people will updoot if they want to, asking for updoots is making you look pathetic not like yourself.

Profile icon
KobeFF

@elipie yeah idk it kinda got into my head since all other posts had something like that lmao

Profile icon
elipie

@KobeFF lmao.

say the same to those posts you are seeing
Profile icon
KobeFF

@elipie XD practically 95% of all posts that I see

also how do u make ur text tiny :(

Profile icon
elipie
@KobeFF magic

jk
its:

###### woohoo this text tINNYNYN
Profile icon
KobeFF

@elipie

Yay tiny text!!!
Profile icon
TsunamiOrSumth

@KobeFF @elipie deja vu, i swear ive seen this conversation on another one of kobe's posts

Profile icon
KobeFF

@TsunamiOrSumth rly??? idk lmao

Profile icon
elipie

lmao, that was probably with uhhhhh idk lol oh yeahhhhhhh @TsunamiOrSumth

Profile icon
JBloves27