Search

Resize plugin

The Resize plugin allows the user to define a custom image output size.

Property Default value Description
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 set this 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}

import { openDefaultEditor } from './pintura.js';

openDefaultEditor({
    src: './my-image.jpeg',

    resizeSizePresetOptions: [
        [undefined, 'Auto'],
        [128, 128],
        [256, 256],
        [512, 256],
        [1024, 1024],
    ],
});

Or when using custom labels.

import { openDefaultEditor } from './pintura.js';

openDefaultEditor({
    src: './my-image.jpeg',

    resizeSizePresetOptions: [
        [undefined, 'Auto'],
        [[128, 128], 'Small'],
        [[512, 512], 'Medium'],
        [[1024, 1024], 'Large'],
    ],
});

Options can be supplied in groups as well.

import { openDefaultEditor } from './pintura.js';

openDefaultEditor({
    src: './my-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'],
            ],
        ],
    ],
});

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.

import { openDefaultEditor } from './pintura.js';

openDefaultEditor({
    src: './my-image.jpeg',

    resizeWidthPresetOptions: [[undefined, 'Auto'], 200, 400, 800],
});

Using custom labels

import { openDefaultEditor } from './pintura.js';

openDefaultEditor({
    src: './my-image.jpeg',

    resizeWidthPresetOptions: [
        [undefined, 'Auto'],
        [200, 'Narrow'],
        [400, 'Normal'],
        [800, 'Wide'],
    ],
});

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.

import { openDefaultEditor } from './pintura.js';

openDefaultEditor({
    src: './my-image.jpeg',

    resizeHeightPresetOptions: [[undefined, 'Auto'], 200, 400, 800],
});

Using custom labels

import { openDefaultEditor } from './pintura.js';

openDefaultEditor({
    src: './my-image.jpeg',

    resizeHeightPresetOptions: [
        [undefined, 'Auto'],
        [200, 'Short'],
        [400, 'Normal'],
        [800, 'Tall'],
    ],
});

resizeWillRenderFooter

This is an experimental feature, the API isn't final yet and might be changed in a future release.

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.

import { openDefaultEditor, createNode } from './pintura.js';

// External amount variable
let amount = 1;

openDefaultEditor({
    src: './my-image.jpeg',

    resizeWillRenderFooter: (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}`,
            }),
        ];
    },
});