This is the archived documentation for Doka Image Editor v6.
Please visit pqina.nl/pintura/docs/ to see documentation for the latest version of Pintura Image Editor.
jQuery
Introduction
The Doka jQuery adapter transforms the standard Doka API into a jQuery plugin API.
Installation
<!-- add to the head of the document -->
<link href="doka.min.css" rel="stylesheet" type="text/css" />
<!-- add to right before the end of the body tag -->
<script src="jquery.js"></script>
<script src="doka.jquery.min.js"></script>
Usage
Now we can use Doka as a jQuery plugin.
Select elements with the familiar $()
function and use .doka() to run functions and change Doka instance properties or methods.
$(function () {
// Turn an element into an editor
$('.my-doka').doka();
// Turn an element into an editor with configuration options
$('.my-doka').doka({
cropAspectRatio: 1,
cropAspectRatioOptions: [
{
label: 'Free',
value: null,
},
{
label: 'Portrait',
value: 1.5,
},
{
label: 'Square',
value: 1,
},
{
label: 'Landscape',
value: 0.75,
},
],
});
// Set a property crop aspect ratio
$('.my-doka').doka('cropAspectRatio', 1);
// Listen for load event
$('.my-doka').on('Doka:load', function (e) {
console.log('an image has been loaded', e);
});
// Manually edit an image using the edit method
$('.my-doka')
.doka('edit', 'my-image.jpeg')
.then(function (output) {
console.log('image edit result', output);
});
});
Using the static Doka API we can open the modal editor.
$(function () {
// call create method without a target element
$.fn.doka.create({
cropAspectRatio: 1,
cropAspectRatioOptions: [
{
label: 'Free',
value: null,
},
{
label: 'Portrait',
value: 1.5,
},
{
label: 'Square',
value: 1,
},
{
label: 'Landscape',
value: 0.75,
},
],
});
});