7 ms·
Show HN: A pure WebGL image editor with filters, crop and perspective correction
I'm working on a pure js webgl image editor with effects, filters, crop & perspective correction, etc.
My goal is to give the community an opensource solution as unfortunately most comparable apps are closed sources.
https://mini2-photo-editor.netlify.app https://mini2-photo-editor.netlify.app to try it out (https://github.com/xdadda/mini-photo-editor https://github.com/xdadda/mini-photo-editor)
- stared 1y agoThank you for sharing! What's the license?
- axelMI 1y agoMIT. thanks for point that out, I did forget to add it
- atonse 1y agoVery cool! What's the license, and how does it compare to some of the other croppers/editors out there? Was it mainly the GL integration?
- axelMI 1y agoOps forgot to add MIT license As for the underlying modules on which it relies Will fix it shortly
- asadm 1y agoin the editor, do add a way to load sample random image to try out the editor instead of having to uploading my own (which most won't bother / don't trust / can't do at work).
- quantadev 1y agoI tried to figure out how to crop an image and found nothing. There doesn't seem to be a crop feature as far as I could tell. I'm sure it's probably there, but not easy for anyone to figure out. Would be super easy to make it intuitive right?
- axelMI 1y agoit's the composition menu ... will rename it just select the area you wish to crop and then move to the other settings (colors, ...) to edit it
- atonse 1y agoI did this but when I hit download, I got back the original image instead of the cropped image.
- quantadev 1y agoI tried it again, and finally noticed you have to click the corner of the image to move the selection area. It works, but then I didn't see a "Crop" button. Only trying to be helpful, and not complaining. Nice work tho on this component.
- axelMI 1y agoNo 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 :)
- quantadev 1y agoI'm the new member of your QA team now! haha. I'll try to crop again when you're ready. :)
- gtb_1 1y agoDid you consider using WebGPU, or creating a bridge between WebGPU / WebGL for this? Also, have you considered deploying on Cloudflare Pages [1] (unlimited bandwidth) instead of netlify? [1] - https://pages.cloudflare.com/ https://pages.cloudflare.com/
- axelMI 1y agoI did consider WebGPU but I couldn't find many advantages for the current use case. Yes I'm planning to move to the edge as soon as it's in a later stage of development
- zorgmonkey 1y agoThe biggest difference for you is probably that WebGPU has compute shaders and WebGL does not, they are pretty nice if you want to implement more complex algorithms.
- axelMI 1y agoThat'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
- zorgmonkey 1y agoI don't have a mac, but my understanding is that Safari Technology Preview [0] has WebGPU support (might need a change a setting too). [0]: https://developer.apple.com/safari/technology-preview/ https://developer.apple.com/safari/technology-preview/
- titaphraz 1y agoApparently it isn't unlimited: https://news.ycombinator.com/item?id=42713451 https://news.ycombinator.com/item?id=42713451
- amadeuspagel 1y agoNice. I tried it with an image from Unsplash. Maybe you can use the Unsplash API[1] to give people an example to play with. [1]: https://unsplash.com/developers https://unsplash.com/developers
- axelMI 1y agoWill have a look at this thanks! in the meantime I've added a quick sample gallery to test the editor out
- fidotron 1y agoThis is neat. Any plans to add blurs and related effects?
- axelMI 1y agoyes, I don't use them but if required it will be easy to add
- flashblaze 1y agoI'm so glad this exsist. I've been meaning to get something similar started, but did not due to one reason or the other. I'll definitely try to contribute.
- axelMI 1y agoWhenever you feel like, ping me on github
- cmenge 1y agoLol, I added a todo yesterday: "find or build good image cropper, ideally gl based" ;) Guess the search might be over, thanks!
- axelMI 1y agolet 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.
- rendaw 1y agoWhat does comparable refer to here? Web based image editors? Like what?
- axelMI 1y agothere are several web based image editors leveraging webgl out there. Some of them are very good such as https://img.ly/products/photo-sdk https://img.ly/products/photo-sdk or https://www.polarr.com/web/ https://www.polarr.com/web/ or https://pqina.nl/pintura/ https://pqina.nl/pintura/ I hope to match some of them in terms of features, but with a lightweight and opensource solution
- rikschennink 1y agoHey! Thanks for mentioning Pintura :) And good luck with the project!
- neosat 1y agoNice! Good performance, clean UI, and core functionality.
- axelMI 1y agothanks. 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 https://immich.app to give you an idea). But it's still too early to share
- cylinderthought 1y agogood AF
- axelMI 1y agothanks!
- ww520 1y agoExcellent work. The UI looks very clean and functional. It's feature packed. Good choice on using WebGL. It has support everywhere in most if not all browsers.
- rorylaitila 1y agoI've been looking for an open source image editor that I can embed in my app for managing my vintage ad archives (https://adretro.com https://adretro.com). Basically I just need to rotate, crop, adjust color. But the images come from from the archive database rather than upload. And I want to work with them quickly, rather than save/open like a desktop app. Last time I looked I couldn't find something with good documentation that was easy to get started with. Right now I bulk edit in Google Photos.
- neurostimulant 1y agoCropperJS is very simple and easy to use: https://fengyuanchen.github.io/cropperjs/ https://fengyuanchen.github.io/cropperjs/ There is also React-Cropper if you want to CropperJS with React: https://github.com/react-cropper/react-cropper https://github.com/react-cropper/react-cropper
- rorylaitila 1y agoThanks I'll check it out again. Last I looked I think it was v1 branch.
- rebelnz 1y agoReally nice work. I had been using Photopea for cropping and quick edits when preparing references for painting but this is super clean and simple.
- Dwedit 1y agoIs there any interference from "anti-fingerprinting" which corrupts the image canvas?
- axelMI 1y agoehm, what? I'm not familiar with this issue
- Dwedit 1y agohttps://support.mozilla.org/en-US/kb/firefox-protection-against-fingerprinting https://support.mozilla.org/en-US/kb/firefox-protection-agai... "Random data is introduced to background images when the image is read back by the website. If a website merely renders data to the background, it will render without alteration. Although typically this does not happen, if the website reads the image data in the background (and potentially displays it to you again), it will have subtle noise that may affect how the image is displayed."
- axelMI 1y agoOk interesting. I'll investigate thanks
- kreelman 1y agoThis does useful things easily. How hard would it be to use it as a batch process?
- axelMI 1y agoBatch 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
- popalchemist 1y agoHey, awesome work! This is sorely needed in the OSS package space. Are you taking into account separation of concerns? I could see myself adopting this if the UI were customizable in Vue, React, etc.
- axelMI 1y agoThe actual webgl engine is packaged as a separate library https://github.com/xdadda/mini-gl 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 ...
- PaulDavisThe1st 1y agoExtremely nice work. I'd like it if there were separate buttons for (a) reset a section (e.g. colors) back to the default and (b) do not use a section (e.g. colors). Right now, turning (e.g.) colors off loses the settings there. Maybe I missed something though.
- sgc 1y agoI too agree this is great, and see space for another low-hanging UI tweak: Allow editing numbers to right directly, instead of only using the slider. I really dislike using sliders beyond a first general impression because it is too slow to get things exactly as I want them. I would guess this is a relatively common sentiment. One feature I don't see but would love to see is text overlay, but that is perhaps moving away from the spirit of the project.
- PaulDavisThe1st 1y agoI don't do web based development (all native desktop), but I'd be quite surprised if this was "low hanging". We have widgets that do this in Ardour and they were far from simple to implement.
- sgc 1y agoI have done similar. It is pretty easy, you just have the slider update the input, that is used for the actual calculations. If I ever get past looking and actually download, I will do it.
- axelMI 1y agoActually 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 1y agoEditing number yes, will do next as I agree it's high priority from a usability pov.
- esperent 1y agoNice work. Couple of issues I had: on mobile (Brave on Android) the touch controls for cropping are very janky. Feels like it steals control each time the picture updates maybe? It's hard to see the controls under the picture on this small screen. Could you add a control to adjust the size of the controls and shrink the picture maybe?
- GlassOwAter 1y agoI’m getting some touch control issues and inability to download the image on iOS.
- axelMI 1y agoSorry, 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
- woranl 1y agoIt would be nice if I can feed an image blob to it, and return the edited image as a blob programmatically - i.e. without the need for an UI to open or download the image. That will help integration/embed it into other apps.
- axelMI 1y agomaybe using the underlying webgl library could help your usecase? https://github.com/xdadda/mini-gl 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();" )
- GlassOwAter 1y agoI like this. It reminds me of Snapseed. Feature request if it isn’t too hard, the ability to overlay an image and blend them together.
- axelMI 1y agoEasy, will add to the TODOs
- shunia_huang 1y agoWould be very nice if it is provided as a library to be able to integrated into another app with partial/full customizations for UI with different theme and stack.
- virtualritz 1y agoDoes this do operations involving multiplications in linear color space? It seems to use mini-gl[0] for the filtering. I had a brief look at the mini-gl source and it seems to use color as-is? If that were true, for 99% of content that people would upload -- stuff in non-linear sRGB --, the filters would do the wrong thing. Or am I missing something? [0] https://github.com/xdadda/mini-gl https://github.com/xdadda/mini-gl
- axelMI 1y agoYou 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.
- virtualritz 1y agoAFAIK gl.SRGB8_ALPHA8 will only make sure the filtering of the lookup happens in linear sRGB (because filtering involves multiplications). But values returned from the texture lookup must also be linear for any calculations afterwards to make sense. AFAIK you'd need to set internal format to SRGB8_ALPHA8 and the format to RGBA. Then the returned color is also linear. However, according to [1], this combination is only allowed if the result type is requested UNSIGNED_BYTE, i.e. as 8bit/channel. That would mean you will get banding on gradients because 8bit/channel is not nearly enough to represent linear color. I.e. the type should be at least HALF_FLOAT or FLOAT but the table suggest WebGL 2.0 does not support this. I'm not a realtime graphics person, so I may be missing something. And obviously, there must be some workaround for WebGL. Furthermore, the final linear->non linear sRGB conversion must be done, too. I.e. before displaying the result. AFAIK the sRGB framebuffer GL extension can take care of this. But again, not sure. The whole topic of color spaces (vs color models, i.e. RGB is a color model, not a color space) and gamma is not trivial. Almost everyone starting out with any kind of computer graphics involving display/manipulation of colors gets this wrong first time because they do not know about this/assume this is trivial. Don't be discouraged. A good read is [2]. While it specifically addresses color pipelines in VFX/film, all in there applies equally to a simple non-linear sRGB image (a typical JPG, e.g.) being manipulated and then displayed or saved out as 8bit/channel again. [1] https://registry.khronos.org/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE https://registry.khronos.org/webgl/specs/latest/2.0/#TEXTURE... [2] https://www.imageworks.com/sites/default/files/2023-10/Cinematic-Color-imageworks-library-cinematic_color_0.pdf https://www.imageworks.com/sites/default/files/2023-10/Cinem...
- abirch 1y agoThis is awesome!!! One small UX ask would be to manually edit the values instead of using the sliders. Since this is Open Source (thank you) I may try to tweak that this weekend.
- axelMI 1y agodone!
- munksbeer 1y agoThis looks great, well done. However, I find one of the main tools I'm always looking for is the ability to resize an image. I want to retain the exact dimensions, just shrink the number of pixels. I can't spot that, is it there? Or would you consider adding it?
- axelMI 1y agoI 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
- sjsdaiuasgdia 1y agoI assume they meant aspect ratio instead of dimensions.
- axelMI 1y agooh, 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
- munksbeer 1y agoApologies, by dimensions, I did mean aspect ratio. All I mean is keep the same image, but reduce the number of pixels, and lose some clarity, to reduce the size of the file. Your suggestion above doesn't work. Try it. It keeps the picture aspect ratio, but it crops the picture. I don't want to crop it, I want to shrink the number of pixels but keep the same image (with loss of clarity because reducing pixels).