DEV Community

Cover image for Building a Realtime Photoshop 🎨

Building a Realtime Photoshop 🎨

Chris Bongers on August 15, 2020

We're going to do something amazing this weekend - we'll be re-creating Photoshop! Well, not entirely, but we'll be re-creating the image filters ...
Collapse
 
saberglow profile image
Wali Ullah • • Edited

Check out my pen (Clrd.), I didn't use any CSS filters, but actually programmed those filters myself in JS (so the processing is really slow, but hey, it works).

codepen.io/saberglow/pen/OJNypmg

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Hey Wali,

That's proper amazing man!
Can't believe you made these in JS from scratch 🀟

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Thanks! Happy to hear you enjoyed it.

Collapse
 
amindotb profile image
Amin Bagheri •

Do you have any idea to export the edited image as it rendered in browser?

Collapse
 
saberglow profile image
Wali Ullah •

right click > save as....? seems to be working fine for me.

Collapse
 
waylonwalker profile image
Waylon Walker •

That doesn't capture your edits.

Thread Thread
 
saberglow profile image
Wali Ullah •

yeap, just noticed that....

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Hmm I have a unverified idea, that Canvas might be an option, but going to do some research on this topic.

Collapse
 
gwutama profile image
Galuh Utama •

Great job!

I’m wondering if we can load RAW images and howβ€˜s the performance when working with let’s say 20 MP jpeg image.

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Hi Galuh,

First, thank you so much for the respect here.

As too RAW, unfortunately not as "image" we could convert the RAW image to a base64 encode, but that removes all meta stuff you actually want in a RAW image.

As for big images the following uses a 54MB picture!

codepen.io/rebelchris/full/gOrrGyz

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Glad you like it 🀩