v8.90.3

Resize plugin

Use the Resize plugin to enable width and height input controls to enable the user to determine an image output size.

Property Default value Description
resizeAspectRatioLocked
false
Controls the state of the resize lock.
resizeEnableButtonLockAspectRatio
true
Toggle the resize lock button on/off.
resizeMinSize
{ width: 1, height: 1 }
The minimum image size the user can set.
resizeMaxSize
{ width: 9999, height: 9999 }
The maximum image size the user can set.
resizeSizePresetOptions
undefined
The size options to show in the size dropdown. When not set no dropdown is rendered.
resizeWidthPresetOptions
undefined
The width options to show in the width dropdown. When not set no dropdown is rendered.
resizeHeightPresetOptions
undefined
The height options to show in the height dropdown. When not set no dropdown is rendered.
resizeWillRenderFooter
undefined
Can be used to adjust the items and fields in the resize footer.

resizeSizePresetOptions

Don't set resizeMinSize and resizeMaxSize when using preset options.

When this option is set it will replace the default number input fields.

Options can be either [width, height] or [[width, height], 'My label']. When the option is set to [width, height] the label will automatically be set to ${width} × ${height}

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        resizeSizePresetOptions: [
            [undefined, 'Auto'],
            [128, 128],
            [256, 256],
            [512, 256],
            [1024, 1024],
        ],
    });
</script>

Or when using custom labels.

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        resizeSizePresetOptions: [
            [undefined, 'Auto'],
            [[128, 128], 'Small'],
            [[512, 512], 'Medium'],
            [[1024, 1024], 'Large'],
        ],
    });
</script>

Options can be supplied in groups as well.

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        resizeSizePresetOptions: [
            [undefined, 'Auto'],
            [
                'Twitter',
                [
                    [[400, 400], 'Profile picture'],
                    [[1500, 500], 'Header'],
                    [[1200, 675], 'Post image size'],
                ],
            ],
            [
                'Facebook',
                [
                    [[400, 400], 'Profile picture'],
                    [[1125, 633], 'Cover photo'],
                    [[1200, 630], 'Post image size'],
                ],
            ],
        ],
    });
</script>

When selecting an option the editor will set both the imageTargetSize and imageCropAspectRatio properties. To preselect an option you have to set these properties as well.

In this example we automatically select the 512 × 256 option.

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        resizeSizePresetOptions: [
            [undefined, 'Auto'],
            [128, 128],
            [256, 256],
            [512, 256],
            [1024, 1024],
        ],
        imageTargetSize: { width: 512, height: 256 },
        imageCropAspectRatio: 512 / 256,
    });
</script>

resizeWidthPresetOptions

Don't set resizeMinSize and resizeMaxSize when using preset options.

Cannot be used in combination with resizeSizePresetOptions.

When set this will replace the default number input fields.

Options can either be [width, 'My label'] or width. When set to width the value will also be used for the label.

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        resizeWidthPresetOptions: [[undefined, 'Auto'], 200, 400, 800],
    });
</script>

Using custom labels

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        resizeWidthPresetOptions: [
            [undefined, 'Auto'],
            [200, 'Narrow'],
            [400, 'Normal'],
            [800, 'Wide'],
        ],
    });
</script>

resizeHeightPresetOptions

Don't set resizeMinSize and resizeMaxSize when using preset options.

Cannot be used in combination with resizeSizePresetOptions.

When set this will replace the default number input fields.

Options can either be [height, 'My label'] or height. When set to height the value will also be used for the label.

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        resizeHeightPresetOptions: [[undefined, 'Auto'], 200, 400, 800],
    });
</script>

Using custom labels

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        resizeHeightPresetOptions: [
            [undefined, 'Auto'],
            [200, 'Short'],
            [400, 'Normal'],
            [800, 'Tall'],
        ],
    });
</script>

resizeWillRenderFooter

The resizeWillRenderFooter hook receives the current footer definition and editor environment parameters. The hook allows injecting custom controls into the tools list using the createNode helper function.

The third parameter of the hook is a redraw function, you can call this function to redraw the UI. Only needed when adjusting external parameters.

In the example below we add an amount dropdown and a price label.

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor, createNode } from './pintura.js';

    let amount = 0;

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        willRenderToolbar: (footer, env, redraw) => {
            console.log(footer);
            // logs: [ Array(4), Array(4), Array(4) ]

            console.log(env);
            // logs: { orientation: "landscape", verticalSpace: "short", … }

            // insert your item
            return [
                // Our custom dropdown
                createNode('Dropdown', 'amount', {
                    id: 'amount',
                    label: amount,
                    selectedIndex: amount - 1,
                    options: [
                        [1, '1'],
                        [2, '2'],
                        [3, '3'],
                    ],
                    onchange: (item) => {
                        // Update our external amount variable
                        amount = item.value;

                        // The editor doesn't know about our external amount
                        // variable so the price label won't update if we
                        // don't tell it to redraw the UI
                        redraw();
                    },
                }),

                // Existing footer items
                ...footer,

                // A price label
                createNode('span', 'price', {
                    textContent: 'USD ' + amount * 10,
                }),
            ];
        },
    });
</script>

Resize plugin exports

The core editor module exports the following Resize plugin objects.

Export Description
plugin_resize The resize util view.
plugin_resize_locale_en_gb The resize util locales.