Setting up Pintura Image Editor with jQuery File Upload
For a quick start use the jQuery File Upload example project as a guideline.
Before continuing it's highly recommended to read the JavaScript installation guide as it clarifies important internal functionality of the image editor.
Default implementation example
In the default example below we'll use the openDefaultEditor method to quickly create an image editor.
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>
<!-- jQuery File Upload styles -->
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"
/>
<link href="jquery.fileupload.css" rel="stylesheet" />
<link href="jquery.fileupload-ui.css" rel="stylesheet" />
<!-- Pintura Image Editor styles -->
<link rel="stylesheet" href="./pintura/pintura.css" />
<!--
jQuery File Upload HTML snippet
Copy paste HTML snippet from this demo:
https://blueimp.github.io/jQuery-File-Upload/
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="https://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="https://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<script src="jquery.fileupload.js"></script>
<script src="jquery.fileupload-process.js"></script>
<script src="jquery.fileupload-image.js"></script>
<script src="jquery.fileupload-audio.js"></script>
<script src="jquery.fileupload-video.js"></script>
<script src="jquery.fileupload-validate.js"></script>
<script src="jquery.fileupload-ui.js"></script>
<script type="module">
// import Pintura Image Editor functionality
import { openDefaultEditor } from './pintura/pintura.js';
$(function () {
'use strict';
// Create jQuery File Upload
$('#fileupload').fileupload({
url: 'server/php/',
// When editing a file use Pintura Image Editor
edit: function (file) {
return new Promise((resolve, reject) => {
const editor = openDefaultEditor({
src: file,
imageCropAspectRatio: 1,
});
editor.on('process', ({ dest }) => {
resolve(dest);
});
editor.on('close', () => {
resolve(file);
});
});
},
});
});
</script>Advanced implementation example
In this example we'll create a custom editor, using a custom set of plugins, locale, and available options.
While this example is a lot more verbose it does allow us to create a more optimal editor package. The build process will tree-shake unused functionality resulting in a smaller build target.
<!DOCTYPE html>
<!-- jQuery File Upload styles -->
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"
/>
<link href="jquery.fileupload.css" rel="stylesheet" />
<link href="jquery.fileupload-ui.css" rel="stylesheet" />
<!-- Pintura Image Editor styles -->
<link rel="stylesheet" href="./pintura/pintura.css" />
<!--
jQuery File Upload HTML snippet
Copy paste HTML snippet from this demo:
https://blueimp.github.io/jQuery-File-Upload/
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="https://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="https://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<script src="jquery.fileupload.js"></script>
<script src="jquery.fileupload-process.js"></script>
<script src="jquery.fileupload-image.js"></script>
<script src="jquery.fileupload-audio.js"></script>
<script src="jquery.fileupload-video.js"></script>
<script src="jquery.fileupload-validate.js"></script>
<script src="jquery.fileupload-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="https://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="https://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<script src="jquery.fileupload.js"></script>
<script src="jquery.fileupload-process.js"></script>
<script src="jquery.fileupload-image.js"></script>
<script src="jquery.fileupload-audio.js"></script>
<script src="jquery.fileupload-video.js"></script>
<script src="jquery.fileupload-validate.js"></script>
<script src="jquery.fileupload-ui.js"></script>
<script type="module">
// import Pintura Image Editor modules
import {
// Image editor
openEditor,
createDefaultImageReader,
createDefaultImageWriter,
// The method used to register the plugins
setPlugins,
// The plugins we want to use
plugin_crop,
plugin_finetune,
plugin_annotate,
// The main UI and plugin locale objects
locale_en_gb,
plugin_crop_locale_en_gb,
plugin_finetune_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 properties
markup_editor_defaults,
plugin_finetune_defaults,
} from './pintura/pintura.js';
setPlugins(plugin_crop, plugin_finetune, plugin_annotate);
$(function () {
'use strict';
// Create jQuery File Upload
$('#fileupload').fileupload({
url: 'server/php/',
// When editing a file use Pintura Image Editor
edit: function (file) {
return new Promise((resolve, reject) => {
const editor = openEditor({
src: file,
imageReader: createDefaultImageReader(),
imageWriter: createDefaultImageWriter(),
// Set Markup Editor defaults
...markup_editor_defaults,
// Set Finetune plugin defaults
...plugin_finetune_defaults,
// This handles complex shapes like arrows / frames
shapePreprocessor: createDefaultShapePreprocessor(),
// This will set a square crop aspect ratio
imageCropAspectRatio: 1,
// Set locale
locale: {
...locale_en_gb,
...plugin_crop_locale_en_gb,
...plugin_finetune_locale_en_gb,
...plugin_annotate_locale_en_gb,
...markup_editor_locale_en_gb,
},
});
editor.on('process', ({ dest }) => {
resolve(dest);
});
editor.on('close', () => {
resolve(file);
});
});
},
});
});
</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
