Doka, A JavaScript Image Editor for your Website


Doka weighs around 30 Kb gzipped, is written in native JavaScript, and has zero dependencies, it can therefore be combined with any framework or library. Whether your project is based on React, Angular, Vue, jQuery, or something else, as long as it's based on JavaScript, Doka will fit right in.

Compatible with a wide range of browsers and devices

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.

Desktop

  • Chrome latest
  • Firefox latest
  • Opera latest
  • Microsoft Edge 12+
  • Safari 9+ Mac
  • Internet Explorer 11

Mobile

  • Safari 9+ iOS
  • Chrome Android
  • Firefox Android

Integration with familiar File Upload libraries

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.

 const doka = Doka.create({ cropAspectRatioOptions: [ { label: 'Free', value: null }, { label: 'Portrait', value: 1.25 }, { label: 'Landscape', value: .75 } ]
}); const input = document.querySelector('input[type="file"]');
input.addEventListener('change', e => { doka.edit(input.files[0]) .then(({ file }) => { }); });
 FilePond.registerPlugin( FilePondPluginImageExifOrientation, FilePondPluginImagePreview, FilePondPluginImageEdit, FilePondPluginImageCrop, FilePondPluginImageResize, FilePondPluginImageTransform
); FilePond.create(document.querySelector('input'), { imageEditEditor: Doka.create({ cropAspectRatioOptions: [ { label: 'Free', value: null }, { label: 'Portrait', value: 1.25 }, { label: 'Landscape', value: .75 } ] }) server: '/post' });
 Dropzone.options.dokaDropzone = { transformFile: useDokaWithDropzone({ cropAspectRatioOptions: [ { label: 'Free', value: null }, { label: 'Portrait', value: 1.25 }, { label: 'Landscape', value: .75 } ] }), url: '/post' };
 const uppy = Uppy({ onBeforeFileAdded: useDokaWithUppy({ cropAspectRatioOptions: [ { label: 'Free', value: null }, { label: 'Portrait', value: 1.25 }, { label: 'Landscape', value: .75 } ] }), id: 'uppy' });
 useDokaWithJQueryFileUpload({ cropAspectRatioOptions: [ { label: 'Free', value: null }, { label: 'Portrait', value: 1.25 }, { label: 'Landscape', value: .75 } ]
}); $('#fileupload').fileupload({ disableImageResize: true, previewMaxWidth: 100, previewMaxHeight: 100, previewCrop: true, url: '/post' });