A powerful JavaScript Image Editor that integrates with every stack

Name: Doka Image Editor
Brand: PQINA
Rating: 5.0 (35 reviews)

A fully configurable image editor SDK that works on every device. Set image requirements and help your customers upload better pictures.

Crop, rotate, resize, filter, annotate, adjust colors, and much more…

Download now

Desktop Mobile

Auto Night Day

Doka Image Editor is pretty sick! If you need any sort of image editor in your application, use Doka for a 10,000 hour head start.

Wes Bos Full Stack JavaScript Developer

A fantastic user and developer experience

Everything you need in one package

Doka Image Editor packs everything your users need to edit images and can easily be integrated in your project.

Enforce crop aspect ratio

Enforce a single crop aspect ratio or offer a range of aspect ratio options to make sure uploaded images are always perfect.
Client-side transforms

Boost file upload speed and lower server bandwidth usage by compressing, resizing, and converting images in the browser.
Rotate, resize and flip

Make the pixel perfect crop each time. Scale images using the zoom control, mouse wheel, touchpad, or intuitive multi-touch interaction.
Overlay crop guides

Help your customers upload better images. Show an overlay on top of the editor to illustrate bleed margins or profile picture boundaries.
Photo filter effects

Apply a set of carefully crafted filter effects to your photos. Extend with your own filters and the Doka Image Editor UI will update automatically
Responsive and accessible

Scales to best fit the available space. Interact with touch, mouse, and keyboard. Works great on mobile, tablet, and desktop.

More features…

Control language and icons in the user interface
Undo, redo, and reset actions
Toggle individual editor controls
Output binary image and/or editor state
Add annotations to images
Rotate, z-order, flip, and duplicate shapes
Enter multline text and align to left, center, or right
Automatically apply watermarks
Apply styles with CSS Custom Properties
Define custom values for shape colors, fonts, and style dropdowns
Set predefined shapes and control shape editing rules
Switch between bright and dark theme with two CSS Custom Properties
Control image brightness, contrast, exposure, saturation, clarity, and gamma.
Apply a dark or bright vignette
Set a target output image size
Manualy resizing of images
Automatically render in a modal
Render as overlay on top of an existing image
Render as inline editor right in the webpage
Load file objects, blobs, URLs, and dataURLs
Load canvas elements and image tags
Multi-touch interaction on mobile
Supports keyboard navigation
Load raster images like GIFs, PNGs, WEBPs, JPEGs and BMPs
Automatically corrects photo orientation
Copy JPEG EXIF data to output image
Transform input images to other image formats
Supports custom load logic to load HEIC or other image formats
Compress JPEG and WEBP images
Set different arrow start and end styles
Preserve transparency when editing and saving PNGs
Easily integrate with third party file upload libraries
Enable or disable aspect ratio dropdown
Customize crop aspect ratio dropdown options
Add stickers to editor with drag drop
Makes optimal use of different viewport sizes
Supports tree shaking for minimal bundle sizes
Great selection of default image filters
Tested succesfully on fast and slow devices

Download now Learn more

Use standalone or with your favorite framework

Ready for your project

Whether you're using jQuery, React, Vue, Svelte, Angular, or something completely different, Doka Image Editor will fit right in.

Written in vanilla JavaScript. No dependencies.
Includes TypeScript declaration file.
Compatible with a wide range of browsers and devices.

I spent weeks writing my own editor and it still sucked and was buggy. Was blown away at how easy it was to integrate Doka Image Editor into our existing app! Within 2 hours I was done.

Steve Lamb CTO - Scribeware

index.html

<!DOCTYPE HTML>
<head>
  <link href="./doka.css" rel="stylesheet" type="text/css">
</head>
<body>
  
  <!-- Show editor here -->
  <div class="my-editor"></div>

  <!-- Show image edit result here -->
  <img src="" alt=""/>

  <script>
  import { appendEditor } from './doka.js';

  const editor = appendEditor('.my-editor', {
    src: 'my-image.jpeg'
  })

  editor.on('process', ({ dest }) => {
    const image = document.querySelector('img')
    image.setAttribute('src', URL.createObjectURL(dest))
  })
  </script>
</body>

index.html

<!DOCTYPE HTML>
<head>
  <link href="./doka.css" rel="stylesheet" type="text/css">
</head>
<body>

  <!-- Show editor here -->
  <doka-image-editor src="my-image.jpeg"></doka-image-editor>

  <!-- Show image edit result here -->
  <img src="" alt="">

  <script>
  import { defineCustomElements } from './doka.js';

  /* Handles the process events so we can show the output image */
  const handleProcessEvent = e => {
    const image = document.querySelector('img')
    image.setAttribute('src', URL.createObjectURL(e.detail.dest))
  }
  
  /* Automatically initialises all Doka Image Editor custom elements */
  defineCustomElements().then(editors => {
    editors.forEach(editor => {
      editor.addEventListener('doka:process', handleProcessEvent);
    })
  })
  </script>
</body>

index.html

<!DOCTYPE HTML>
<head>
  <link href="doka.css" rel="stylesheet" type="text/css">
</head>
<body>
  
  <div class="my-editor"></div>

  <img src="" alt=""/>

  <script src="jquery.js"></script>
  <script src="jquery-doka/doka.js"></script>

  <script>
  $('.my-editor').doka({
    src: 'my-image.jpeg'
  })

  $('.my-editor').on('doka:process', e => {
    $('img').attr('src', URL.createObjectURL(e.detail.dest));
  });
  </script>
</body>

App.jsx

import { DokaImageEditor } from 'react-doka';

import 'doka/doka.css';

function App() {
  const [inlineResult, setInlineResult] = useState();

  return (
    <div className="App">

      <DokaImageEditor 
        src="my-image.jpeg"
        onProcess={(res) => 
          setInlineResult(
            URL.createObjectURL(res.dest)
          )
        }/>
      
      {inlineResult && (<img src={inlineResult} alt="" />)}
      
    </div>
  )
}

export default App;

App.vue

<template>
  <div>
  
    <DokaImageEditor
      src="my-image.jpeg"
      @doka:process="handleInlineProcess($event)">
    </DokaImageEditor>
    
    <img v-if="inlineResult" :src="inlineResult" alt="" />

  </div>
</template>
<script>
import { DokaImageEditor } from 'vue-doka';

export default {
  name: 'App',
  components: {
    DokaImageEditor,
  },
  data() {
    return {
      inlineResult: undefined
    }
  },
  methods: {
    handleInlineProcess: function (event) {
      this.inlineResult = URL.createObjectURL(event.detail.dest);
    }
  }
}
</script>

<div>

  <div>
    <doka-image-editor
      src="my-image.jpeg"
      (load)="handleInlineLoad($event)"
      (process)="handleInlineProcess($event)">
    </doka-image-editor>
  </div>

  <img *ngIf="inlineResult" [src]="inlineResult" alt="" />
  
</div>

import { AngularDokaModule } from 'angular-doka';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private sanitizer: DomSanitizer) {}

  inlineResult: SafeUrl = undefined;

  handleInlineProcess($event) {
      const objectURL = URL.createObjectURL($event.dest);
      this.inlineResult = this.sanitizer.bypassSecurityTrustUrl(objectURL);
  }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularDokaModule } from 'angular-doka';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularDokaModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

App.svelte

<script>
import { DokaImageEditor } from 'svelte-doka';

let inlineResult;
</script>

<DokaImageEditor
  src="image.jpeg"
  on:process={
    e => inlineResult = URL.createObjectURL(e.detail.dest)
  }>
</DokaImageEditor>

{#if inlineResult}
<img src={inlineResult} alt=""/>
{/if}

To keep the code snippets concise some default properties have been hidden.

Use with popular file upload libraries

Copy paste the Dropzone, FilePond, Uppy, or jQuery File Upload to your project and you're up and running.

Compatible with modern web technologies

Supports TypeScript, tested with Electron powered apps, works seamlessly with any CSS framework.

JavaScript
Custom Elements
jQuery
React
Vue
Angular
Svelte
TypeScript
Electron
tailwindcss
Bootstrap
Foundation

Save countless development hours

Easily integrate Doka Image Editor in your project. Get stuck? No worries.
Just contact support, we're always happy to help out.

Download now

Help your customers upload better pictures

No more fixing photos on the backend

Set requirements and increase the quality of your user-generated content. Control how images arrive on your server.

We love working with Doka Image Editor - it has given us a shortcut to offering image cropping and stickers that would have been very difficult to implement ourselves.

Jamie Wilde CTO - Miro

Overlay crop guides

Visually indicate how to make the perfect crop. Wether it's rendering a circular overlay to indicate profile picture bounds, or indicating print bleed margins, the shape API has got you covered.

Lock crop aspect ratio

Be sure customer images always conform to your requirements and fit perfectly by defining a fixed aspect ratio or by supplying a list of preset aspect ratios.

Automatically watermark images

Save time and automatically add watermarks or shapes to images. Using the Doka Image Editor shape shape API you can programmatically draw anything on top of the output image.

Resize images to fit a target size

Set a maximum target size, define the resize mode (contain, cover, or force) and Doka Image Editor will automatically scale images to fit the target size.

Autocorrect mobile photo orientation

Stop receiving flipped or rotated photos. Doka Image Editor makes sure the uploaded image is always presented correctly to the customer and the resulting image orientation is correct.

Finetune the UI to your needs

Enable or disable interface elements and features, change the language of the control labels and/or update the icons.

Powerful annotation tools

Draw rectangles, circles, lines, arrows, and text. Rotate, resize, duplicate and z-order annotations. Freedraw with a sharpie. Control which tools are available, which colors and fonts can be choosen from, and much more.

Live image preview

Render on top of an image to show a live preview of the result. Ideal for editing a profile page header or landing page hero images.

Give it a try below!

Loading editor...

Ready to get started?

If you find Doka Image Editor is not a great fit for you project, contact us within 60 days and we'll refund you in full, no questions asked.

Download now Learn more

Want to be kept in the loop?

Icons by Feather, Photography by Unsplash

A powerful JavaScript Image Editor that integrates with every stack

A fantastic user and developer experience

Enforce crop aspect ratio

Client-side transforms

Rotate, resize and flip

Overlay crop guides

Photo filter effects

Responsive and accessible

Use standalone or with your favorite framework

Use with popular file upload libraries

Compatible with modern web technologies

Save countless development hours

Help your customers upload better pictures

Overlay crop guides

Lock crop aspect ratio

Automatically watermark images

Resize images to fit a target size

Autocorrect mobile photo orientation

Finetune the UI to your needs

Powerful annotation tools

Live image preview

Ready to get started?

Want to be kept in the loop?