axelMI

you could have a look at the source code in https://github.com/xdadda/mini-photo-editor for image effects (demo at https://mini2-photo-editor.netlify.app/)

cute :)

added thanks for the suggestion

done! added in the "composition" menu and fully integrated in the workflow

I preferred just having an input with the correct pixels rather than % (to keep UI clean) but you'll get the same result

Mhh. Maybe if you can show me an editor/app that does what you require will help me figure out how it works and replicate it

I don't know if I have to thank you or just hate you! Spent best part of the day figuring out the whole srgb-linear thing.

Well the workflow should now be srgb correct! Had to fix some of the shaders and they now work, except for the vignette one that unexpectedly sucks in linear space but will replace it with another one soon.

Turns out adding gl.SRGB8_ALPHA8 for loading textures (excluding LUTs) and closing the pipeline with a linear-to-sRGB transform did the trick. Plus making sure the filters where working in the correct space.

No significant banding issues with 8bit depth images (except for the above-mentioned vignette filter). I did test with various gradients and sample images where I compared pixel by pixel. Apparently it holds quite well. Of course the 8bit limitation sucks and I'll keep looking for workarounds.

If you have the possibility to stress test it a little bit I would be forever grateful.

By the way, I'll add image blending soon which should help spotting colorspace errors.

oh, in that case it's enough to go in the crop section, select "pic" to keep the current "picture" aspect ratio and resize the crop box

I must admit this baffles me a little. Width and heights are measured in pixels. The number of pixels of an image is width x height (eg a raw image 256x256 means it has 256*256 = 65.536 pixels = 262.144 bytes - if RGBA8). I cannot reduce its pixels and keep the same width and height or viceversa. I can a) reduce the quality of an image with a lossy compression (in download if you select jpg you can reduce the quality which will in turn reduce the file size) b) scale an image when displayed in a browser (canvas.style.width > canvas.width) but the underlying image will still be canvas.width

Maybe I'm missing something

Ok interesting. I'll investigate thanks

done!

numbers input added

thanks Just to better understand your request.

a) the Ø at the right of a section resets the section's settings back to default zeros (it becomes white when available) b) closing a section doesn't lose it's settings, unless of course it has been reset

As for a button that allows to "temporarily" disable a section (but keeping it's modified settings underneath), yes it's a very good idea

a whole new rabbit hole to get sucked into !! ahahah

You are right thanks for the heads up!! It currently works in linear color space. I wasn't familiar with the issue.

I need to figure out if it's enough in Webgl to add gl.SRGB8_ALPHA8 when loading/ copying textures or I should gamma correct in all the color handling shaders. Will do some testing to figure it out.

That's true. But current shaders are very simple. The big issue I have with WebGPU is that it's still not supported by all browser (see Safari) while WebGL is nowadays everywhere.

I work on a MacBook and I need to make sure that at least Safari (soooo many issues/ bugs/ specific behaviours it drives my crazy) works fine

ehm, what? I'm not familiar with this issue

Easy, will add to the TODOs

Batch processing would ideally require a backend.

Batch processing in the browser would be limited by memory space and therefore everything would have to be queued (even if on more webworkers) and very slow/ unreliable IMHO.

What I'll implement next, if there's a request, is the possibility to save the recipes of the adjustments (crop/ perspective excluded) in order to quickly apply them to subsequent images

Actually it's very easy to implement in a webapp. I will just need to think if there's a sleeker way to do it in terms of UI than just adding a simple input box ... although generally simpler is better so

Editing number yes, will do next as I agree it's high priority from a usability pov.

maybe using the underlying webgl library could help your usecase? https://github.com/xdadda/mini-gl

The constructor requires - a canvas (which can be an OffscreenCanvas) - an arrayBuffer with the image (which you easily get from a blob with "await blob.arrayBuffer();" )

The actual webgl engine is packaged as a separate library https://github.com/xdadda/mini-gl

As for the more complex UI modules (ie crop) in theory it shouldn't be too difficult to build a vanilla-js separate module, but not sure I'll have the time as these kind of solutions need to take into account so many use-cases and edge-cases that they easily become a nightmare to maintain ...

Sorry, this at the moment is desktop only. Maybe in the future I'll work on a separate PWA, but UI would need a complete re-design

As mentioned in another comment, this is just a UI for https://github.com/xdadda/mini-gl

thanks!

No no I absolutely need this kind of feedback thanks! Being a solo developer is very difficult to gage usability and UX is definitely not my strength.

I tried to integrate the crop/ composition in the natural workflow of image processing, without a discreet "crop" button. But I guess it's not necessarily the most intuite thing to do :)

let me know of any usability issue. I tried different combinations and this seemed intuitive for me (compared to other solution), but of course I'm too biased.

Whenever you feel like, ping me on github

thanks. It started as a proof of concept for a custom reactivity engine (based on signals and tagged template literals). But while at it I realised I needed something quick and easy for my needs.

I already have a prototype for a self-hosted photogallery that integrates this editor (something like https://immich.app to give you an idea). But it's still too early to share

Will have a look at this thanks! in the meantime I've added a quick sample gallery to test the editor out