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

<!DOCTYPE html>

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

<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',
        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>',
            },
        },
    });
</script>

App.jsx
App.css

import 'pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                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>',
                    },
                }}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :frameStyles="frameStyles"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            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>',
                },
            },
        };
    },

    methods: {},
};
</script>
<style>
@import '../local_modules/pintura/pintura.css';

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

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import 'pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        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>',
            },
        }}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    frameStyles: any = {
        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>',
        },
    };
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [frameStyles]="frameStyles"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

<!DOCTYPE html>

<link rel="stylesheet" href="./jquery-pintura/pintura.css" />
<script src="jquery.js"></script>
<script src="jquery-pintura/pintura.js"></script>

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

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

<script>
    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            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>',
                },
            },
        });
    });
</script>

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.

<!DOCTYPE html>

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

<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',
        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],
        ],
    });
</script>

App.jsx
App.css

import 'pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                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],
                ]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :frameOptions="frameOptions"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            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],
            ],
        };
    },

    methods: {},
};
</script>
<style>
@import '../local_modules/pintura/pintura.css';

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

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import 'pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        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],
        ]}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    frameOptions: any = [
        // 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],
    ];
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [frameOptions]="frameOptions"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

<!DOCTYPE html>

<link rel="stylesheet" href="./jquery-pintura/pintura.css" />
<script src="jquery.js"></script>
<script src="jquery-pintura/pintura.js"></script>

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

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

<script>
    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            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],
            ],
        });
    });
</script>

Frame plugin exports

The core editor module exports the following Frame plugin objects.

Export	Description
`plugin_frame`	The frame util view.
`plugin_frame_defaults`	A default frame util configuration object exposing a selection of the frame styles below.
`plugin_frame_locale_en_gb`	The frame util locales.
`frameSolidSharp`	An inset edge.
`frameSolidRound`	A rounded inset edge.
`frameLineSingle`	A single line inset.
`frameLineMultiple`	A multi line inset.
`frameEdgeSeparate`	Lines separated along image edges.
`frameEdgeCross`	Lines crossed at corners of image.
`frameEdgeOverlap`	Lines slightly overlapping at image corners.
`frameHook`	Hooks drawn in corners of image.
`framePolaroid`	A Polaroid style frame, best used with Polaroid aspect ratio `0.973`