Frame plugin

The Frame plugin enables us to add controls to update the frame drawn on top of the image. We can import the default frame control set or define our own styles.

Property Default value Description
frameStyles
undefined
An object describing the available frame styles.
frameOptions
undefined
A list of key label pairs describing which frame styles to render in the menu.

frameStyles

An object describing the styles of the frame shapes and the HTML or SVG to use when drawing their thumbnails. For more information on the default available frame styles read Frame style preprocessors

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

openEditor({
    frameStyles: {
        solidSharp: {
            shape: {
                frameStyle: 'solid',
                frameSize: '2.5%',
            },
            thumb: '<rect stroke-width="5" x="0" y="0" width="100%" height="100%"/>',
        },
        solidRound: {
            shape: {
                frameStyle: 'solid',
                frameSize: '2.5%',
                frameRound: true,
            },
            thumb: '<rect stroke-width="5" x="0" y="0" width="100%" height="100%" rx="12%"/>',
        },
        lineSingle: {
            shape: {
                frameStyle: 'line',
                frameInset: '2.5%',
                frameSize: '.3125%',
                frameRadius: 0,
            },
            thumb: '<div style="top:.5em;left:.5em;right:.5em;bottom:.5em;box-shadow:inset 0 0 0 1px currentColor"></div>',
        },
    },
});

frameOptions

A list of key label pairs describing which frame styles to render. Label can be a string but in most cases is a function, the function is then passed the current locale and can select the correct locale key.

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

openEditor({
    frameOptions: [
        // No frame
        [undefined, (locale) => locale.labelNone],

        // Sharp edge frame
        ['solidSharp', (locale) => locale.frameLabelMatSharp],

        // Rounded edge frame
        ['solidRound', (locale) => locale.frameLabelMatRound],

        // A single line frame
        ['lineSingle', (locale) => locale.frameLabelLineSingle],
    ],
});