Beautiful Image Editor | JavaScript Image Editor | Doka by PQINA

High-performance JavaScript image editing in the browser

Cropping, rotating, flipping, filtering, resizing, annotating, and client-side transforming of images, it's all possible with Doka.

Purchase Learn more

Use standalone or combine it with your favorite tools

  • JavaScript
  • React
  • Vue
  • Angular
  • jQuery
  • Bootstrap
  • Foundation

Easy image editing for your customers

Doka packs everything your customers need when editing images, you decide which features are available and have full control over the end result.

Only want to receive square images? No problem! All pictures should be in grayscale? Done! Photos should be resized and compressed? Check!

  • Toggle crop, filter, color, markup, and resize controls
  • Add annotations to the image
  • Apply watermarks
  • Define custom values for markup colors, fonts, and style dropdowns
  • Set predefined markup and control markup editing rules
  • Bright and dark theme defined with CSS Custom Properties
  • Control image brightness, contrast, exposure, and saturation.
  • Set a minimum output image size
  • Customisation of the output size
  • Full screen and modal layout mode
  • Set to preview mode to render on top of an existing image
  • Render as editor mode right in the webpage
  • Load file objects, URLs, and dataURLs
  • Load canvas elements and image tags
  • An intuitive user experience on all platforms
  • Load raster images like GIFs, PNGs, JPEGs and Bitmaps
  • Load, transform, and save SVGs
  • Automatically corrects photo orientation
  • Copy JPEG EXIF data to output image
  • Transform input images to other image formats
  • Compress JPEG images
  • Preserve transparency when editing and saving PNGs
  • Easily integrate with third party libraries
  • Change locale of all labels
  • Enable additonal rotate right button
  • Enable or disable aspect ratio dropdown
  • Customize aspect ratio dropdown options
  • Load images by dropping files on editor

Missing a feature? Let us know here

A user-friendly approach to image cropping

Empower your users to personalize their profile pages.

Use Doka preview-mode edit images in place, judge the result before confirming the crop.

Edit full screen and enable crop masks to create space for editing and a great preview of the end result.

Optimise images before they hit your server

Use Doka with FilePond or other popular file upload components to create a streamlined editing and uploading experience for your customers.

Easily integrate Doka with your project

Doka is written in native JavaScript, includes a TypeScript declaration file, and has zero dependencies. Whether your project is based on React, Vue, Angular, jQuery, uses Bootstrap, Foundation, or something completely different, Doka will fit right in.

Ships with handy framework adapter components

The React, Vue, Angular, and jQuery adapter components make it super easy to integrate Doka in your web application.

JavaScript

// 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
  }
});

React

{/* 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 an image */}
<DokaOverlay 
    crop={ crop }
    src={ src }
    enabled={ enabled }
    onConfirm={ this.handleDokaConfirm }
    onCancel={ this.handleDokaCancel }>
    <img src={ imagePreviewSource } alt=""/>
</DokaOverlay>

Vue

<!-- Render an in-page Doka editor -->
<Doka 
    style="width:640px; height:480px"
    crop-aspect-ratio="1"
    :crop-aspect-ratio-options="cropOptions"
    :src="src"
    @confirm="handleDokaConfirm"
    @cancel="handleDokaCancel"/>

<!-- Toggle a fullscreen Doka modal -->
<DokaModal 
    v-if="enabled"
    crop-aspect-ratio="1"
    :src="src" 
    @confirm="handleDokaConfirm"
    @cancel="handleDokaCancel"
    @close="enabled=false"/>

<!-- Overlay Doka on top of an image -->
<DokaOverlay 
    :enabled="enabled"
    :src="imageSource" 
    :crop="imagePreviewCrop"
    @confirm="handleDokaConfirm"
    @cancel="handleDokaCancel">
    <img :src="imagePreviewSource" alt="">
</DokaOverlay>

Angular

<!-- Render an in-page Doka editor -->
<lib-doka
    style="width:640px; height:480px"
    [src]="src"
    [options]="options"
    (onconfirm)="handleDokaConfirm($event)"
    (oncancel)="handleDokaCancel()">
</lib-doka>

<!-- Toggle a fullscreen Doka modal -->
<lib-doka-modal
    *ngIf="enabled"
    [src]="src"
    [options]="options"
    (onconfirm)="handleDokaConfirm($event)"
    (oncancel)="handleDokaCancel()"
    (onclose)="handleDokaClose()">
</lib-doka-modal>

<!-- Overlay Doka on top of an image -->
<lib-doka-overlay
    [enabled]="enabled"
    [src]="imageSrc"
    [options]="options"
    (onconfirm)="handleDokaConfirm($event)"
    (oncancel)="handleDokaCancel()">
    <img [src]="imagePreviewSource" alt="" />
</lib-doka-overlay>

jQuery

// 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
  }
});

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.

Desktop

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

Mobile

  • Safari 9+ iOS
  • Chrome Android
  • Firefox Android

The Doka API is set up to integrate beautifully with all kinds of file upload components. Whether you're using FilePond, Dropzone, Uppy or jQuery File Upload, installation will be a breeze.

The product package contains example integrations and helper functions for all the plugins above.

JavaScript

// 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
    });

});

FilePond

// 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'

});

Dropzone

// 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'

};

Uppy

// 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'

});

jQuery File Upload

// 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'

});

A word from our customers

PQINA serves over 8,000 customers and is rated 4.93 out of 5 stars based on 425+ customer reviews

Purchase your Doka license

Use Doka in unlimited SaaS projects, web applications, and websites, receive free updates and premium support. Select your license and get started!

30-day money-back guarantee. No questions asked.
Developer

$109 / year

Buy now
Team

$449 / year

Buy now
Organisation

$1999 / year

Buy now
Seats Unlimited
Support Yes Priority Priority
All features Yes Yes Yes
Free updates Yes Yes Yes

What's in the package? Doka License Agreement

All licenses are perpetual. If you don't renew your subscription you may continue to use Doka in your product, but will receive no further updates.

OEM and Enterprise licenses

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 here to get started.

FAQ

What's in the package?

The package contains the Doka library files, various integration examples with popular file upload libraries, and Doka example projects for JavaScript, React, Vue, Angular, and jQuery.

All demo's on this product page are included for each of the frameworks listed above. The React, Vue, and Angular projects can be run from the command line using npm start

  • license.pdf
  • README.md
  • CHANGELOG.md
  • src
    • doka.mjs
    • doka.scss
  • bin
    • browser
    • esm
    • typescript
    • react
    • vue
    • angular
    • jquery
    • polyfill
  • integrations
    • filepond
    • dropzone
    • uppy
    • jquery-fileupload
    • file-input
  • examples
    • react
      • DemoFilePond.jsx
      • DemoInline.jsx
      • DemoModal.jsx
      • DemoPreview.jsx
      • DemoProfile.jsx
    • vue
      • DemoFilePond.vue
      • DemoInline.vue
      • DemoModal.vue
      • DemoPreview.vue
      • DemoProfile.vue
    • angular
      • demo-filepond.component.ts
      • demo-inline.component.ts
      • demo-modal.component.ts
      • demo-preview.component.ts
      • demo-profile.component.ts
    • jquery
      • inline.html
      • modal.html
      • preview.html
      • profile.html
    • native
      • inline.html
      • modal.html
      • preview.html
      • profile.html

How do you define a developer?

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.

How do I contact support?

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.

How do I request a refund?

30-day money-back guaranteed for any purchase under the conditions detailed in the License Agreement.

What are my payment options?

Transactions are handled by Gumroad. The Gumroad store accepts credit cards or PayPal. For more information read the Gumroad FAQ entry on payment methods

How do I generate an invoice?

You'll find a link to generate an invoice in the purchase confirmation email. For more information read the Gumroad FAQ entry on invoices

What happens when I cancel my subscription?

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.

How is VAT handled?

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.

How do I download the product?

Log in to your Gumroad account, click on your account name in the top right corner. Make sure the account is set to "buying". Click the "library" menu item to see an overview of your purchases.

Other questions?

Feel free to contact us here.

Didn't find what you were looking for? Ask us here