Using Pintura Image Editor with JavaScript
For a quick start use the JavaScript example project as a guideline.
It includes a normal, modal, and overlay editor example, as well as an example showing how to integrate FilePond with Pintura.
There's various ways we can show an editor instance on the page, from appending it, showing it in a modal, or overlaying it on top of another image.
Default JavaScript implementation example
In the default example below we'll use the appendDefaultEditor
method to quickly add an image editor to another HTML element.
This creates a "default" editor that has all available plugins loaded and comes preset with all plugin default options and English locale. Each of these settings can be adjusted freely.
<!DOCTYPE html>
<link rel="stylesheet" href="./pintura.css" />
<style>
.my-editor {
height: 600px;
}
</style>
<div class="my-editor"></div>
<script type="module">
import { appendDefaultEditor } from './pintura.js';
const pintura = appendDefaultEditor('.my-editor', {
// The source image to load
src: 'image.jpeg',
// This will set a square crop aspect ratio
imageCropAspectRatio: 1,
});
</script>
Advanced JavaScript implementation example
If we want to create a custom editor, using a custom set of plugins, locale, and available options, then we can opt to use the appendEditor
method.
We now have to set the available plugins, load the correct locale objects, and set the default plugin options. While a lot more verbose this does allow us to create a more optimal editor package as we're omitting unneeded logic.
<!DOCTYPE html>
<link rel="stylesheet" href="./pintura.css" />
<style>
.my-editor {
height: 600px;
}
</style>
<div class="my-editor"></div>
<script type="module">
import {
// The editor factory method
appendEditor,
// Import the default image reader and writer
createDefaultImageReader,
createDefaultImageWriter,
// The method used to register the plugins
setPlugins,
// The plugins we want to use
plugin_crop,
plugin_finetune,
plugin_filter,
plugin_annotate,
// The user interface and plugin locale objects
locale_en_gb,
plugin_crop_locale_en_gb,
plugin_finetune_locale_en_gb,
plugin_filter_locale_en_gb,
plugin_annotate_locale_en_gb,
// Because we use the annotate plugin we also need
// to import the markup editor locale and the shape preprocessor
markup_editor_locale_en_gb,
createDefaultShapePreprocessor,
// Import the default configuration for the markup editor and finetune plugins
markup_editor_defaults,
plugin_finetune_defaults,
plugin_filter_defaults,
} from './pintura.js';
// This registers the plugins with Pintura Image Editor
setPlugins(plugin_crop, plugin_finetune, plugin_filter);
// Append the editor
appendEditor('.my-editor', {
// The source image to load
src: 'image.jpeg',
// This will read the image data (required)
imageReader: createDefaultImageReader(),
// This will write the output image
imageWriter: createDefaultImageWriter(),
// The markup editor default options, tools, shape style controls
...markup_editor_defaults,
// The finetune util controls
...plugin_finetune_defaults,
// The filter util controls
...plugin_filter_defaults,
// This handles complex shapes like arrows / frames
shapePreprocessor: createDefaultShapePreprocessor(),
// This will set a square crop aspect ratio
imageCropAspectRatio: 1,
// The icons and labels to use in the user interface (required)
locale: {
...locale_en_gb,
...plugin_crop_locale_en_gb,
...plugin_finetune_locale_en_gb,
...plugin_filter_locale_en_gb,
...plugin_annotate_locale_en_gb,
...markup_editor_locale_en_gb,
},
});
</script>
Next steps
With the editor set up, we can continue to configure the editor to our liking by adjusting the available options exposed by the editor API