HackerTrans
TopNewTrendsCommentsPastAskShowJobs

axelMI

no profile record

Submissions

Show HN: A pure WebGL image editor with filters, crop and perspective correction

github.com
243 points·by axelMI·السنة الماضية·86 comments

comments

axelMI
·السنة الماضية·discuss
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/)
axelMI
·السنة الماضية·discuss
cute :)
axelMI
·السنة الماضية·discuss
added thanks for the suggestion
axelMI
·السنة الماضية·discuss
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
axelMI
·السنة الماضية·discuss
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
axelMI
·السنة الماضية·discuss
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.
axelMI
·السنة الماضية·discuss
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
axelMI
·السنة الماضية·discuss
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
axelMI
·السنة الماضية·discuss
Ok interesting. I'll investigate thanks
axelMI
·السنة الماضية·discuss
done!
axelMI
·السنة الماضية·discuss
numbers input added
axelMI
·السنة الماضية·discuss
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
axelMI
·السنة الماضية·discuss
a whole new rabbit hole to get sucked into !! ahahah
axelMI
·السنة الماضية·discuss
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.
axelMI
·السنة الماضية·discuss
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
axelMI
·السنة الماضية·discuss
ehm, what? I'm not familiar with this issue
axelMI
·السنة الماضية·discuss
Easy, will add to the TODOs
axelMI
·السنة الماضية·discuss
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
axelMI
·السنة الماضية·discuss
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
axelMI
·السنة الماضية·discuss
Editing number yes, will do next as I agree it's high priority from a usability pov.