DEV Community

Cover image for Build an Image Editor with JavaScript 🎨
Dom (dcode)
Dom (dcode)

Posted on

Build an Image Editor with JavaScript 🎨

Have you ever wondered if it was possible to build an image editor with plain JavaScript?

Well, you're in luck because today I'm going to show you how to do it.

No third-party libraries are required.

Let's get into it.

How Will it Work?

Good question. We'll be using HTML5 Canvas to store the image, and then, using the canvas context's filter property, apply different filters to the image.

These filters include things such as:

  • brightness
  • saturation
  • blur
  • inversion

See a list of all available filters here.

We're going to be giving the user the option to decide which filters should be applied to the image, and how intense each filter should be. This is done by using <input type="range" /> as you can see below.

Image Editor Screenshot

Full Video Tutorial

You can find the source code and full video tutorial for this project on my YouTube channel, dcode.

Enjoy! 😎

Top comments (3)

Collapse
 
sloan profile image
Sloan the DEV Moderator

Hi there, we encourage authors to share their entire posts here on DEV, rather than mostly pointing to an external link. Doing so helps ensure that readers don’t have to jump around to too many different pages, and it helps focus the conversation right here in the comments section.

If you choose to do so, you also have the option to add a canonical URL directly to your post.

Collapse
 
shuttercock profile image
unadvancednewbie

Totally agreed man. We're here for reading articles not watching external youtube !!

Collapse
 
jeffchavez_dev profile image
Jeff Chavez

Wow. I'll saved this for future projects.