High-performance cropping, flipping, rotating, resizing, and transforming of images.
Purchase Learn moreDoka packs everything your customers need when cropping images, because of its beautiful device agnostic design it fits in everywhere.
Enforce a specific crop aspect ratio to make sure output images always fit perfectly. Offer creative freedom by defining a range of aspect ratios to choose from.
Boost file upload speed and lower server bandwidth usage by compressing, resizing, and converting the files on the client. Doka can output both raster and vector data.
Rotate, resize and flip pictures to make the perfect selection. Scale image using the mouse wheel or mobile multi-touch controls.
Quickly turn images in 90° steps, finetune the result using the rotation control at the bottom of the viewport.
Crop masks help your customers align their images and make the perfect crop.
Render a custom overlay on top of the crop area to show which areas of the final image will be used.
Apply different filter effects to images. Finely tuned default image filters are all available by default.
Want to set custom filters? Add your own filters to the mix and the Doka interface will update accordingly.
Automatically scales to available space. Can be controlled by Touch, Mouse, and/or Keyboard.
Doka is functional on both mobile and desktop browsers and has been successfully tested on fast and slow devices.
Missing a feature? Let us know here
React
Vue
Bootstrap
jQuery
Foundation
Empower your users to personalize their profile pages.
Editing the profile picture in place would be cumbersome because of the limited space. By switching Doka to full view mode and enabling a crop mask we create more room for the editing experience and still allow previewing the result.
Use Doka and FilePond together to create a streamlined editing and uploading experience.
Doka weighs around 40 Kb gzipped, is written in native JavaScript (it includes a TypeScript definition file), and has zero dependencies, therefore, it can be combined with any framework or library. Whether your project is based on React, Vue, Angular, jQuery, or something else, as long as it's based on JavaScript, Doka will fit right in.
With the newly added React, Vue, and jQuery adapter components it's now even easier to integrate Doka in your web application.
{/* Render an in-page Doka editor */}
<Doka
style={{ width: '640px', height: '480px' }}
src={ src }
crop={ crop }
onConfirm={ this.handleDokaConfirm }
onCancel={ this.handleDokaCancel }/>
{/* Toggle a fullscreen Doka modal */}
{ enabled && <DokaModal
src={ src }
crop={ crop }
onConfirm={ this.handleDokaConfirm }
onCancel={ this.handleDokaCancel }/> }
{/* Overlay Doka on top of another element */}
<DokaOverlay
crop={ crop }
src={ src }
enabled={ enabled }
onConfirm={ this.handleDokaConfirm }
onCancel={ this.handleDokaCancel }>
<img src={ image } alt=""/>
</DokaOverlay>
<!-- Render an in-page Doka editor -->
<Doka
ref="doka"
style="height:400px"
crop-aspect-ratio="1"
:crop-aspect-ratio-options="cropOptions"
:src="src"
@confirm="handleDokaConfirm"
@cancel="handleDokaCancel"/>
<!-- Toggle a fullscreen Doka modal -->
<DokaModal
crop-aspect-ratio="1"
:src="src"
v-if="enabled"
@confirm="handleDokaConfirm"
@cancel="handleDokaCancel"
@close="enabled=false"/>
<!-- Overlay Doka on top of another element -->
<DokaOverlay
:enabled="enabled"
:src="imageSource"
:crop="imagePreviewCrop"
@confirm="handleDokaConfirm"
@cancel="handleDokaCancel">
<img :src="imagePreviewSource" alt="">
</DokaOverlay>
// Render an in-page Doka editor
$('.my-element > div').doka({
src: './my-image.jpeg',
onconfirm: (output) => {
// Handle output image here
}
});
// Toggle a fullscreen Doka modal
$.fn.doka.create({
src: './my-image.jpeg',
cropAspectRatio: '16:9',
onconfirm: (output) => {
// Handle output image here
}
});
// Overlay Doka on top of another element
$.fn.doka.create(root, {
src: './my-image.jpeg',
styleLayoutMode: 'preview',
outputData: true,
onconfirm: (output) => {
// Handle output image here
}
});
// Render an in-page Doka editor
const root = document.querySelector('.my-element > div');
Doka.create(root, {
src: './my-image.jpeg',
onconfirm: (output) => {
// Handle output image here
}
});
// Toggle a fullscreen Doka modal
Doka.create({
src: './my-image.jpeg',
cropAspectRatio: '16:9',
onconfirm: (output) => {
// Handle output image here
}
});
// Overlay Doka on top of another element
Doka.create(root, {
src: './my-image.jpeg',
styleLayoutMode: 'preview',
outputData: true,
onconfirm: (output) => {
// Handle output image here
}
});
Doka is compatible with browsers going back as far as Internet Explorer 11 and performs fine on older Android and iOS devices as well. Check the list below to make sure Doka runs on the most common browsers used by your target audience.
The Doka API is set up to integrate beautifully with all kinds of file upload solutions. Whether you're using FilePond, Dropzone, Uppy or jQuery File Upload, installation will be a breeze.
The product package includes example integrations and helper functions for all the plugins above.
// With FilePond we do the actual file transformation outside
// of Doka, as that allows for faster image previews
FilePond.registerPlugin(
FilePondPluginImageExifOrientation,
FilePondPluginImagePreview,
FilePondPluginImageEdit,
FilePondPluginImageCrop,
FilePondPluginImageResize,
FilePondPluginImageTransform
);
FilePond.create(document.querySelector('input'), {
// Set the Doka editor as editor to use
imageEditEditor: Doka.create({
cropAspectRatioOptions: [
{ label: 'Free', value: null },
{ label: 'Portrait', value: 1.25 },
{ label: 'Landscape', value: .75 }
]
})
// Set other FilePond properties here
server: '/post'
});
// Create a Doka Dropzone, the "useDokaWithDropzone" function automatically
// creates a "transformFile" function for use of Doka with Dropzone
Dropzone.options.dokaDropzone = {
// Link up Dropzone with Doka using our custom "transformFile" function
transformFile: useDokaWithDropzone({
cropAspectRatioOptions: [
{ label: 'Free', value: null },
{ label: 'Portrait', value: 1.25 },
{ label: 'Landscape', value: .75 }
]
}),
// Set other Dropzone properties here
url: '/post'
};
// Create a Doka Uppy, the "useDokaWithUppy" function automatically
// creates a "onBeforeFileAdded" function for use of Doka with Uppy
const uppy = Uppy({
// Link up Uppy with Doka using our custom "onBeforeFileAdded" function
onBeforeFileAdded: useDokaWithUppy({
cropAspectRatioOptions: [
{ label: 'Free', value: null },
{ label: 'Portrait', value: 1.25 },
{ label: 'Landscape', value: .75 }
]
}),
// Set other Uppy properties here
id: 'uppy'
});
// Link up a Doka and jQuery File Upload, the "useDokaWithJQueryFileUpload" function automatically
// adds a doka processQueue action to use Doka with jQuery File Upload
useDokaWithJQueryFileUpload({
cropAspectRatioOptions: [
{ label: 'Free', value: null },
{ label: 'Portrait', value: 1.25 },
{ label: 'Landscape', value: .75 }
]
});
$('#fileupload').fileupload({
// We'll disable image resizing, Doka will handle that
disableImageResize: true,
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: true,
// Set other jQuery File Upload properties here...
url: '/post'
});
// We create a Doka editor instance. Now we can use this instance
// to load file objects, it will automatically open them fullscreen
const doka = Doka.create({
cropAspectRatioOptions: [
{ label: 'Free', value: null },
{ label: 'Portrait', value: 1.25 },
{ label: 'Landscape', value: .75 }
]
});
// Listen for changes on a file input element
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', e => {
// Edit the loaded file with Doka
doka.edit(input.files[0])
.then(({ file }) => {
// "file" is the transformed file object
});
});
Doka kills it in both user and developer experience. It is simple to get working and the UX is streets ahead of other similar offerings. A brilliant library!
Doka was a breeze to integrate, plus support was great. It offers a much cleaner experience for our users than our previous solution. I'm very impressed!
After purchasing Doka you receive a unique license key and a package containing the license and library files. See the file tree below for a full overview of the package contents.
The package contains various integration examples with popular file upload libraries and contains basic Doka setups for JavaScript, React, and Vue. These can all be used as a development starting point.
Every license covers use of Doka in unlimited SaaS projects, web applications, intranets, and websites.
Doka subscriptions start from $109/year, active subscriptions receive all the latest features and updates as well as high-quality support.
$109
$109 year
Covers use of Doka by a single developer.
$545
$449 year
Covers up to five developers or team members at a discount.
$1999
$1999 year
This license covers use of Doka by all developers in a single organisation.
All licenses are perpetual. If you don't renew your license your license you may continue to use your version of Doka for life, but will receive no further updates.
If the above licenses don't cover your use case, for instance if you're packaging Doka in a product for other developers to use, contact us at [email protected] to get started.
A developer is someone on your team interacting with the Doka codebase. This includes implementing, integrating, or changing the code. The license is bound to the amount of developer seats, not the individual developers.
All licenses include support as long as the subscription has not expired. Use the support form to submit a ticket. If your license has expired, please renew the license to receive further support.
30-day money-back guaranteed for any purchase under the conditions detailed in the License Agreement.
Transactions are handled by Gumroad. The Gumroad store accepts credit cards or PayPal. For more information read the Gumroad FAQ entry on payment methods
You'll find a link to generate an invoice in the purchase confirmation email. For more information read the Gumroad FAQ entry on invoices
When you cancel your subscription you may continue to use your current version of Doka for life, but will receive no further updates or support after the yearly term has ended.
VAT is automatically handled by Gumroad. If you have a VAT ID you can enter it on your invoice, if you're not required to pay VAT, Gumroad will automatically issue a refund.
Feel free to contact us directly at [email protected]
Didn't find what you were looking for? Ask us here