Resize plugin
The Resize plugin allows the user to define a custom image output size.
Property | Default value | Description |
---|---|---|
resizeMinSize |
|
The minimum image size the user can set. |
resizeMaxSize |
|
The maximum image size the user can set. |
resizeSizePresetOptions |
|
The size options to show in the size dropdown. When not set no dropdown is rendered. |
resizeWidthPresetOptions |
|
The width options to show in the width dropdown. When not set no dropdown is rendered. |
resizeHeightPresetOptions |
|
The height options to show in the height dropdown. When not set no dropdown is rendered. |
resizeWillRenderFooter |
|
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}`,
}),
];
},
});