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
This is awesome. Thanks for sharing the progress along the way. It's been fun to watch this come to life.
@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.
@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.
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.
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.
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.
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.
@realnegotiator Not out of the box, you would need to integrate it with a file upload plugin first.
Considering how awesome FilePond.js is, Doka.js definitely won't disappoint. Congrats on the launch Rik!
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
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!
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
Luggage Losers