feat(web): photo editor

[faupau03]

Implementation of an simple photo editor, mostly inspired by google's editor.

For now this draft mostly exists of design files, the edit function is partially functional.
A simple render is implemented and lets you download the edited image directly.

Progress:

Web:

• Suggestions tab:

• algorithmic enhancement

• Crop and Rotate:

• Rotate
• Flip
• Crop
• Aspect ratio selection
• free crop
• zoom

• Adjust:

• simple css filters like brightness, contrast, etc.
• more advanced adjustments (white balance, black level, temperature, etc)

• Templates:

• simple templates
• more templates (maybe more adjustment features are needed)

• Other:

• simple web rendering
• edit history (server side saving mechanism needed)
• edited tag (server side saving mechanism needed)
• load edited image (server side saving mechanism needed)
• responsive design

Server:

• Saving:

• save all edits in json (or other format) to db
• save edited rendered photo ↑
• link edited photo to original
• copy metadata to edited rendered photo

• Other:

• editing of edited photo: load original image and apply edits from db
• edit history
• edited tag

Want to try it out?

If you want to try the editor yourself simply clone this branch:

git clone https://github.com/faupau03/immich -b feat-web-photo-editor

Then simply go to the web folder, install the packages and set your server endpoint according to https://immich.app/docs/developer/setup#connect-to-a-remote-backend. Now a simple npm run dev will start the dev web server.

cd immich/web
# for linux/unix systems
PUBLIC_IMMICH_SERVER_URL=https://demo.immich.app/api npm run dev
# for windows
$env:PUBLIC_IMMICH_SERVER_URL = 'https://demo.immich.app/api'
npm run dev

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
immich	⬜️ Ignored (Inspect)	Visit Preview		Oct 7, 2023 11:17am

[alextran1502]

Hello, do you mind open a focus-discussion on Discord to discuss with us before the implementation to save time along the way :) Thank you for the great contribution!

[faupau03]

Hello, do you mind open a focus-discussion on Discord to discuss with us before the implementation to save time along the way :) Thank you for the great contribution!

Done, https://discord.com/channels/979116623879368755/1129456657995403294

[andrzej-r]

While an image editor is great, it is a bit of a heavy-weight solution for correcting orientation of photos - probably the most common issue, along with incorrect location or date. For that, a quick +/-90Deg rotation feature in the viewer's metadata editor would work better. Especially if it did not change the original image or video.

[simontims]

While an image editor is great, it is a bit of a heavy-weight solution for correcting orientation of photos - probably the most common issue, along with incorrect location or date. For that, a quick +/-90Deg rotation feature in the viewer's metadata editor would work better. Especially if it did not change the original image or video.

In the 'other' application, the rotation sticks without save but doesn't otherwise change the image. This feels like the most practical approach. Adding user settings to show/hide editor controls would be the best of all worlds and prevent the need for multiple versions of editors with different capabilities.

[stephen304]

While an image editor is great, it is a bit of a heavy-weight solution for correcting orientation of photos - probably the most common issue, along with incorrect location or date. For that, a quick +/-90Deg rotation feature in the viewer's metadata editor would work better. Especially if it did not change the original image or video.

Imo without being able to replicate the edit features of Google Photos, many users (such as myself) will be unable to remove the Google Photos app, which is constantly begging me to re-enable backup to their servers every time I need to open it to edit a photo.

I think faupau03 did a great job of replicating the featureset of GPhotos, a few more items I use regularly that I wish were included in immich include:

• Free crop (already noted, but I use this for all document photos to correct skew)
• White point / highlight / shadow / black point (I guess included under "advanced adjustments" but very handy to have)
• Warmth (I adjust this on almost every photo before sharing)
• Skin tone

[zackpollard]

Hey @faupau03, as this has been open for some time now, we wanted to figure out what the best course of action for this is. If you aren't able to make the required changes, could you give us a rundown of where this PR is at and what changes you had in mind before it was ready to be reviewed and merged? Also bear in mind that not all of the features in this list need to be done before this gets merged, perhaps a better option is to finish what is already there and then we can have a follow-up PR to add the rest of the features you wanted to work on. If there's still no update after this we will probably close this PR until someone from the team wants to pick it up, or you are able to continue working on it. Thanks for the efforts so far!

[faupau03]

Hey @faupau03, as this has been open for some time now, we wanted to figure out what the best course of action for this is. If you aren't able to make the required changes, could you give us a rundown of where this PR is at and what changes you had in mind before it was ready to be reviewed and merged? Also bear in mind that not all of the features in this list need to be done before this gets merged, perhaps a better option is to finish what is already there and then we can have a follow-up PR to add the rest of the features you wanted to work on. If there's still no update after this we will probably close this PR until someone from the team wants to pick it up, or you are able to continue working on it. Thanks for the efforts so far!

Hi @zackpollard, i started to develop on this feature coming out of school with plenty of time. Iam currently studying and by that have not as much time. The current status of this pull request is the following: cropping, rotating and color "grading" is working ui wise. The image then gets rendered in the browser. I implemented a simple save button, which uploads the image to the immich server and adds it to the original image as a stack. Feel free to try it out ;) I think the saving and rendering mechanism is something to be better implemented: support more formats, use the most quality versions, save mechanism on the server? I hope i answered all your questions. I think i will be able to work in it in the future, but i think depending on whats needed server side, i would need some help ;)

[faupau03]

Hey @faupau03, as this has been open for some time now, we wanted to figure out what the best course of action for this is. If you aren't able to make the required changes, could you give us a rundown of where this PR is at and what changes you had in mind before it was ready to be reviewed and merged? Also bear in mind that not all of the features in this list need to be done before this gets merged, perhaps a better option is to finish what is already there and then we can have a follow-up PR to add the rest of the features you wanted to work on. If there's still no update after this we will probably close this PR until someone from the team wants to pick it up, or you are able to continue working on it. Thanks for the efforts so far!

Hi @zackpollard, i started to develop on this feature coming out of school with plenty of time. Iam currently studying and by that have not as much time.
The current status of this pull request is the following: cropping, rotating and color "grading" is working ui wise.
The image then gets rendered in the browser.

I implemented a simple save button, which uploads the image to the immich server and adds it to the original image as a stack. Feel free to try it out ;)
I think the saving and rendering mechanism is something to be better implemented: support more formats, use the most quality versions, save mechanism on the server?
I hope i answered all your questions. I think i will be able to work in it in the future, but i think depending on whats needed server side, i would need some help ;)