Subscribe
Sign in
Doka.js — A JavaScript image editor for your website ✂️
✂️ A vanilla JavaScript library for cropping and editing images in the browser.
📱 Fast on older and newer devices. Handles touch, mouse, and keyboard input.
🕹 Rotate, turn, scale and flip images.
🗜️ Compress, reformat, and resize images on the client.
🔌 Easily integrate with libraries like Dropzone, Uppy, jQuery File Upload, and FilePond.
56
Replies
Best
Would be great replacement of https://developers.aviary.com/ (Adobe creative SDK will stop support of the product this year). Hope to see more features
@vladkorobov I want to slowly extend it with image color controls, filters and possibly text and symbols.
I've seen this product built by Rik for months & months polishing it to every last detail & sharing all the cool GIFs on Telegram & Twitter. This has to be the best image editor. Great job Rik 🎉
Pros:Best Image Editor out there
Cons:None
This is awesome. Thanks for sharing the progress along the way. It's been fun to watch this come to life.
Hi!
I'm Rik, in March this year I launched FilePond.js an open source file upload library 🚀
Doka.js was initially going to be a plugin for FilePond, but as the project grew I figured it would work better as a stand-alone solution. So here we are!
Doka.js features everything you need to handle image cropping on your website. Turning, rotating, flipping, setting a fixed or free aspect ratio, client-side transforming of raster images (and SVG's), mobile photo orientation correction, loading from various file origins, rendering fullscreen, in a container, and editing images in-place. 🤯
As Doka.js is a vanilla JavaScript solution and features a straight-forward file-in 💫 file-out API it easily integrates with existing platforms and libraries. To lower the bar even further the package contains helper functions and examples for linking with Dropzone, Uppy, jQuery File Upload, and of course FilePond. 🔌
Doka.js is named after the Dutch short word for "Donkere kamer" which stands for "photography Darkroom", so, now you know. With my Dutch roots, that seemed fitting. 🧀
That's it for now! I'm going to grab a ☕️ and will be here all day to answer your questions.
Considering how awesome FilePond.js is, Doka.js definitely won't disappoint. Congrats on the launch Rik!
Will for sure be checking this out and sharing with my dev team to look at. We run a very image heavy web app and providing a way to make some basic adjustments to images after uploading would be rad
@unclejessy4real Let me know if you have any questions Clayton, always happy to assist.
Rik, Congrats.
I see this makes the client side things easy. In my opinion, the real challenge is displaying images correctly in a view-port - on the client side.
The images themselves can be from anywhere on the cloud. The end-user may access the service from any device, device orientation. Devices may each have standard or high density displays.
So you have view-ports that are 1. square, 2, portrait 3. landscape
The images may be in any format 1. square, 2, portrait 3. landscape
There are additional issues with focus-point, which is best determined at the time of uploading. -
Can you also provided the corresponding view port? This is major hassle in the product catalog business (where you may have easily have 100,000+ images)
Thoughts?
Thanks @resh!
Doka is aimed at helping customers make the right Crop and defining their perfect image composition.
I think these tools might help you solve the issues you refer to:
Responsive images:
https://developer.mozilla.org/en...
Defining a focal point:
https://www.javascripting.com/vi...
So for instance, you could make a crop with Doka and then in the next step manually click on the image to select a focal point, upload the file data along with the focal point info. Then on the client you use focal-point and responsive images to render the correct output on every viewport.
A beautiful design for a great tool!
Filepond have a great UI and Doka is following exactly the same line!
Easy to use for visitors and easy to use for developers!
It is a hidden gem!
@danielkempe Hi!
Style customizations can be made with CSS:
https://pqina.nl/doka/docs/patte...
Functionality wise I'm exposing a way to add plugins in the near future.
@rikschennink Ok, so I couldn't add unsplash api and text overlays for example?
@danielkempe You can integrate with the unsplash API for retrieving images I think, and you could use an upload library for pushing files to unsplash.
Text overlays are currently not part of the product but are on the roadmap. You could, for instance, add them in a second image editing step.
I love how simple this is. Will this also work in Jacascript based apps or just in the browser?
@justinotherjohnson, to be honest, I haven't tested it yet but as those often run on WebKit based engines I don't see why it shouldn't. So Electron and Cordova are fair game.
Great product. But in my opinion, the price model is too high for a plugin. The amount should cover lifetime updates. For this kind of money per year you get software that offer a wide variety of options. For example Sketch or any other similar per-year subscriptions.
@bjohn Thanks for the feedback Janez! Pricing is often a subject of discussion.
I've thought about pricing a lot. I feel it's important my customers purchase a product that functions and continues functioning into the future, you purchase a guarantee that if it doesn't function I will help you out. You're paying for continuous personal support and updates. The goal is to create an environment in which I can keep building and extending the product without running out of funds, I think this is in the customers best interest.
Needed this for a project and found it a few month ago, while it was still a part of Filepond. Everything just worked as expected, 5 min install and easy to configure.
Pros:Just works
Cons:None
@realnegotiator Not out of the box, you would need to integrate it with a file upload plugin first.
Handy tool for client-side image editing! 🎉Congrats on the launch @rikschennink!
Luggage Losers