# Image properties

A list of properties to read from and write to the current state of the image loaded in the editor.

Readonly image properties

| Property                                              | Description                             |
| ----------------------------------------------------- | --------------------------------------- |
| [imageFile](#imagefile)                               | The image source as a File object.      |
| [imageSize](#imagesize)                               | The natural size of the image.          |
| [imageLoadState](#imageloadstate)                     | The load state of the image.            |
| [imageProcessState](#imageprocessstate)               | The processing state of the image.      |
| [imageAspectRatio](#imageaspectratio)                 | The aspect ratio of the image.          |
| [imageCropRectAspectRatio](#imagecroprectaspectratio) | The aspect ratio of the crop rectangle. |
| [imageCropSize](#imagecropsize)                       | The size of the crop rectangle.         |
| [imageRotationRange](#imagerotationrange)             | The min and max rotation of the image.  |

Loading and parsing of image data

| Property                                | Default value | Description                                                                                                                        |
| --------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| [src](#src)                             | undefined     | The image source to load, can be of type File, Blob, DataURL, URL, ImageData, ImageBitmap, HTMLCanvasElement, or HTMLImageElement. |
| [imageOrienter](#imageorienter)         | undefined     | The object to use to correctly orient preview image data.                                                                          |
| [imageReader](#imagereader)             | undefined     | The imageReader to use for reading image data.                                                                                     |
| [imageWriter](#imagewriter)             | undefined     | The imageWriter to use for writing image data.                                                                                     |
| [imageScrambler](#imagescrambler)       | undefined     | Used by redaction to scramble information in image layer.                                                                          |
| imageRedactionRendering                 | 'pixelated'   | Set to 'auto' to have smooth blurring, currently not supported by Safari.                                                          |
| [shapePreprocessor](#shapepreprocessor) | undefined     | The preprocessor used to render composit shapes like lineEnd styles and frames.                                                    |

Image properties to update image state

| Property                                                | Default value                   | Description                                                                                                                         |
| ------------------------------------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| [imageCrop](#imagecrop)                                 | undefined                       | A Rect describing the crop relative to the bounding box of the rotated image.                                                       |
| [imageRotation](#imagerotation)                         | 0                               | The rotation of the image in radians.                                                                                               |
| [imageCropAspectRatio](#imagecropaspectratio)           | undefined                       | Set the aspect ratio of the crop as a number.                                                                                       |
| [imageCropLimitToImage](#imagecroplimittoimage)         | true                            | Set to true to limit the crop to the image edges.                                                                                   |
| [imageCropMinSize](#imagecropminsize)                   | { width: 1, height: 1 }         | A Size describing The minimum size of the crop.                                                                                     |
| [imageCropMaxSize](#imagecropmaxsize)                   | { width: 32768, height: 32768 } | A Size describing The maximum size of the crop.                                                                                     |
| [imageFlipX](#imageflipx)                               | false                           | Flip image over X axis.                                                                                                             |
| [imageFlipY](#imageflipy)                               | false                           | Flip image over Y axis.                                                                                                             |
| [imageTargetSize](#imagetargetsize)                     | undefined                       | A Size describing the output size of the image.                                                                                     |
| [imageRedaction](#imageredaction)                       | \[\]                            | Set to an array of [rectangle shapes](../../markup-editor/shapes/#rectangle) to redact in the image.                                |
| [imageAnnotation](#imageannotation)                     | \[\]                            | Set to an array of [shapes](../../markup-editor/shapes/) to apply to the image.                                                     |
| [imageDecoration](#imagedecoration)                     | \[\]                            | Set to an array of [shapes](../../markup-editor/shapes/) to apply to the crop.                                                      |
| imageManipulation                                       | \[\]                            | An array of image manipulation shapes to apply to the image.                                                                        |
| imageSelection                                          | \[\]                            | An array of selection shapes to build a selection with.                                                                             |
| [imageFrame](#imageframe)                               | undefined                       | Set to a frame shape or frame style name to draw on top of the output image.                                                        |
| [imageBackgroundColor](#imagebackgroundcolor)           | undefined                       | A background color to render behind the output image, defaults to transparent. Will render black for non-transparent image formats. |
| [imageBackgroundImage](#imagebackgroundimage)           | undefined                       | The background image to render behind the output image.                                                                             |
| [imageBackgroundFilterMode](#imagebackgroundfiltermode) | undefined                       | Set to 'image' to apply filters and effects to the background image.                                                                |
| [imageColorMatrix](#imagecolormatrix)                   | undefined                       | A color matrix to apply to the image.                                                                                               |
| [imageGamma](#imagegamma)                               | undefined                       | The image gamma adjustment.                                                                                                         |
| [imageVignette](#imagevignette)                         | undefined                       | Vignette to apply to the image \-1 to 1.                                                                                            |
| imageMetadata                                           | undefined                       | Optional object to store custom metadata with the image.                                                                            |
| [imageState](#imagestate)                               | undefined                       | The current state of the image, this contains all information to recreate the current image state.                                  |

### imageFile

The image source as a `File`.

### imageSize

The natural size of the currently loaded image, for example `{ width: 1024, height: 768 }`.

### imageLoadState

The `imageLoadState` contains the load state of the current image as it is passed through the [imageReader](#imagereader).

### imageProcessState

The `imageProcessState` contains the process state of the current image as it is passed through the [imageWriter](#imagewriter).

### imageAspectRatio

The aspect ratio of the currently loaded image, for example `1` for a square image.

### imageCropRectAspectRatio

The aspect ratio of the current crop rectangle, for example `1` for a square crop.

### imageCropSize

The dimensions of the current crop rectangle, for example `{ width: 512, height: 512 }` for a square crop.

### imageRotationRange

The min an max rotation of the image, for example `[-1, 1]`

### src

The source image to load. Update to load a new image.

Accepts:

* `File`
* `Blob`
* `DataURL`
* `URL`
* `ImageData`
* `ImageBitmap`
* `HTMLCanvasElement`
* `HTMLImageElement`

Due to browser security restrictions loading remote URLs is only possible if the remote location has [properly configured CORS headers](../../../faq/#why-does-pintura-throw-a-cors-error-when-processing-the-image%3F).

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-30)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-30)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-30)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-30)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-30)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-30)

* [index.html](#index-html-panel-30)

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

* [App.jsx](#App-jsx-panel-30)
* [App.css](#App-css-panel-30)

`import '@pqina/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'} />
        </div>
    );
}

export default App;
`

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-30)

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

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

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

* [App.svelte](#App-svelte-panel-30)

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
</div>

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

* [app.component.ts](#app-component-ts-panel-30)
* [app.component.html](#app-component-html-panel-30)
* [app.component.css](#app-component-css-panel-30)
* [app.module.ts](#app-module-ts-panel-30)

```javascript
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();
}

```

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

```

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-30)

`<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({ src: 'image.jpeg' });
    });
</script>
`

### imageOrienter

Can be set to a helper object to correctly orient image data. This is useful for older browsers where interpretation of the EXIF orientation header is done incorrectly and images appear upside down or mirrored.

The property expects an object with an `read` and an `apply` function.

* The `read` function is used to read the EXIF orientation header from the image preview data.
* The `apply` function is used to apply the EXIF orientation header to the image preview.

We can import the [createDefaultImageOrienter](../exports/#createdefaultimageorienter) method and use it to set the `imageOrienter` property to automatically orient images.

When using one of the [default editor factories](../../ui/exports/#default-factories) this property is set automatically.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-31)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-31)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-31)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-31)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-31)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-31)

* [index.html](#index-html-panel-31)

`<!DOCTYPE html>

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

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

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

<script type="module">
    import {
        appendEditor,
        createDefaultImageReader,
        createDefaultImageWriter,
        createDefaultImageOrienter,
        setPlugins,
        plugin_crop,
        locale_en_gb,
        plugin_crop_locale_en_gb,
    } from './pintura.js';

    setPlugins(plugin_crop);

    const editor = appendEditor('#editor', {
        imageReader: createDefaultImageReader(),
        imageWriter: createDefaultImageWriter(),
        imageOrienter: createDefaultImageOrienter(),
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
        },
        src: 'image.jpeg',
    });
</script>
`

* [App.jsx](#App-jsx-panel-31)
* [App.css](#App-css-panel-31)

`import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import {
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultImageOrienter,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

const editorDefaults = {
    imageReader: createDefaultImageReader(),
    imageWriter: createDefaultImageWriter(),
    imageOrienter: createDefaultImageOrienter(),
    locale: {
        ...locale_en_gb,
        ...plugin_crop_locale_en_gb,
    },
};

function App() {
    return (
        <div className="App">
            <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
        </div>
    );
}

export default App;
`

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-31)

`<template>
    <div>
        <PinturaEditor v-bind="editorDefaults" src="image.jpeg" />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultImageOrienter,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: {
                imageReader: createDefaultImageReader(),
                imageWriter: createDefaultImageWriter(),
                imageOrienter: createDefaultImageOrienter(),
                locale: {
                    ...locale_en_gb,
                    ...plugin_crop_locale_en_gb,
                },
            },
        };
    },

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

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

* [App.svelte](#App-svelte-panel-31)

`<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import {
        createDefaultImageReader,
        createDefaultImageWriter,
        createDefaultImageOrienter,
        setPlugins,
        plugin_crop,
        locale_en_gb,
        plugin_crop_locale_en_gb,
    } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    setPlugins(plugin_crop);

    let editorDefaults = {
        imageReader: createDefaultImageReader(),
        imageWriter: createDefaultImageWriter(),
        imageOrienter: createDefaultImageOrienter(),
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
        },
    };
</script>

<div>
    <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
</div>

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

* [app.component.ts](#app-component-ts-panel-31)
* [app.component.html](#app-component-html-panel-31)
* [app.component.css](#app-component-css-panel-31)
* [app.module.ts](#app-module-ts-panel-31)

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

import {
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultImageOrienter,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = {
        imageReader: createDefaultImageReader(),
        imageWriter: createDefaultImageWriter(),
        imageOrienter: createDefaultImageOrienter(),
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
        },
    };
}
`

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

```

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-31)

`<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var {
            createDefaultImageReader,
            createDefaultImageWriter,
            createDefaultImageOrienter,
            setPlugins,
            plugin_crop,
            locale_en_gb,
            plugin_crop_locale_en_gb,
        } = $.fn.pintura;

        setPlugins(plugin_crop);

        var editor = $('#editor').pintura({
            imageReader: createDefaultImageReader(),
            imageWriter: createDefaultImageWriter(),
            imageOrienter: createDefaultImageOrienter(),
            locale: {
                ...locale_en_gb,
                ...plugin_crop_locale_en_gb,
            },
            src: 'image.jpeg',
        });
    });
</script>
`

### imageReader

Expects an array of read steps to step through when reading the `src` input image data.

We can import the [createDefaultImageReader](../exports/#createdefaultimagereader) method and use it to set the `imageReader` property to read preview images.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-32)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-32)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-32)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-32)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-32)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-32)

* [index.html](#index-html-panel-32)

`<!DOCTYPE html>

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

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

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

<script type="module">
    import {
        appendEditor,
        createDefaultImageReader,
        createDefaultImageWriter,
        createDefaultImageOrienter,
        setPlugins,
        plugin_crop,
        locale_en_gb,
        plugin_crop_locale_en_gb,
    } from './pintura.js';

    setPlugins(plugin_crop);

    const editor = appendEditor('#editor', {
        imageReader: createDefaultImageReader({ orientImage: true }),
        imageWriter: createDefaultImageWriter(),
        imageOrienter: createDefaultImageOrienter(),
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
        },
        src: 'image.jpeg',
    });
</script>
`

* [App.jsx](#App-jsx-panel-32)
* [App.css](#App-css-panel-32)

`import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import {
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultImageOrienter,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

const editorDefaults = {
    imageReader: createDefaultImageReader({ orientImage: true }),
    imageWriter: createDefaultImageWriter(),
    imageOrienter: createDefaultImageOrienter(),
    locale: {
        ...locale_en_gb,
        ...plugin_crop_locale_en_gb,
    },
};

function App() {
    return (
        <div className="App">
            <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
        </div>
    );
}

export default App;
`

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-32)

`<template>
    <div>
        <PinturaEditor v-bind="editorDefaults" src="image.jpeg" />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultImageOrienter,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: {
                imageReader: createDefaultImageReader({ orientImage: true }),
                imageWriter: createDefaultImageWriter(),
                imageOrienter: createDefaultImageOrienter(),
                locale: {
                    ...locale_en_gb,
                    ...plugin_crop_locale_en_gb,
                },
            },
        };
    },

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

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

* [App.svelte](#App-svelte-panel-32)

`<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import {
        createDefaultImageReader,
        createDefaultImageWriter,
        createDefaultImageOrienter,
        setPlugins,
        plugin_crop,
        locale_en_gb,
        plugin_crop_locale_en_gb,
    } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    setPlugins(plugin_crop);

    let editorDefaults = {
        imageReader: createDefaultImageReader({ orientImage: true }),
        imageWriter: createDefaultImageWriter(),
        imageOrienter: createDefaultImageOrienter(),
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
        },
    };
</script>

<div>
    <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
</div>

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

* [app.component.ts](#app-component-ts-panel-32)
* [app.component.html](#app-component-html-panel-32)
* [app.component.css](#app-component-css-panel-32)
* [app.module.ts](#app-module-ts-panel-32)

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

import {
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultImageOrienter,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = {
        imageReader: createDefaultImageReader({ orientImage: true }),
        imageWriter: createDefaultImageWriter(),
        imageOrienter: createDefaultImageOrienter(),
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
        },
    };
}
`

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

```

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-32)

`<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var {
            createDefaultImageReader,
            createDefaultImageWriter,
            createDefaultImageOrienter,
            setPlugins,
            plugin_crop,
            locale_en_gb,
            plugin_crop_locale_en_gb,
        } = $.fn.pintura;

        setPlugins(plugin_crop);

        var editor = $('#editor').pintura({
            imageReader: createDefaultImageReader({ orientImage: true }),
            imageWriter: createDefaultImageWriter(),
            imageOrienter: createDefaultImageOrienter(),
            locale: {
                ...locale_en_gb,
                ...plugin_crop_locale_en_gb,
            },
            src: 'image.jpeg',
        });
    });
</script>
`

The `imageReader` property has to be set for the editor to be able to show image previews, without it the editor won't run.

When using the [default editor factories](../../ui/exports/#default-factories) we don't have to set this property as it's set automatically.

If we want to pass different configuration options we can set them to the property directly.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-33)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-33)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-33)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-33)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-33)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-33)

* [index.html](#index-html-panel-33)

`<!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',
        imageReader: { orientImage: true },
    });
</script>
`

* [App.jsx](#App-jsx-panel-33)
* [App.css](#App-css-panel-33)

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

const editorDefaults = getEditorDefaults({
    imageReader: { orientImage: true },
});

function App() {
    return (
        <div className="App">
            <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
        </div>
    );
}

export default App;
`

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-33)

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults({
                imageReader: { orientImage: true },
            }),
        };
    },

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

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

* [App.svelte](#App-svelte-panel-33)

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

    let editorDefaults = getEditorDefaults({
        imageReader: { orientImage: true },
    });
</script>

<div>
    <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
</div>

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

* [app.component.ts](#app-component-ts-panel-33)
* [app.component.html](#app-component-html-panel-33)
* [app.component.css](#app-component-css-panel-33)
* [app.module.ts](#app-module-ts-panel-33)

`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({
        imageReader: { orientImage: true },
    });
}
`

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

```

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-33)

`<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            imageReader: { orientImage: true },
        });
    });
</script>
`

### imageWriter

Expects an array of write steps to step through when writing the output image data.

We can import the [createDefaultImageWriter](../exports/#createdefaultimagewriter) method and use it to set the `imageWriter` property to write output images.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-34)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-34)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-34)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-34)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-34)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-34)

* [index.html](#index-html-panel-34)

`<!DOCTYPE html>

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

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

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

<script type="module">
    import {
        appendEditor,
        createDefaultImageReader,
        createDefaultImageWriter,
        createDefaultImageOrienter,
        setPlugins,
        plugin_crop,
        locale_en_gb,
        plugin_crop_locale_en_gb,
    } from './pintura.js';

    setPlugins(plugin_crop);

    const editor = appendEditor('#editor', {
        imageReader: createDefaultImageReader(),
        imageWriter: createDefaultImageWriter({ quality: 0.5 }),
        imageOrienter: createDefaultImageOrienter(),
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
        },
        src: 'image.jpeg',
    });
</script>
`

* [App.jsx](#App-jsx-panel-34)
* [App.css](#App-css-panel-34)

`import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import {
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultImageOrienter,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

const editorDefaults = {
    imageReader: createDefaultImageReader(),
    imageWriter: createDefaultImageWriter({ quality: 0.5 }),
    imageOrienter: createDefaultImageOrienter(),
    locale: {
        ...locale_en_gb,
        ...plugin_crop_locale_en_gb,
    },
};

function App() {
    return (
        <div className="App">
            <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
        </div>
    );
}

export default App;
`

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-34)

`<template>
    <div>
        <PinturaEditor v-bind="editorDefaults" src="image.jpeg" />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultImageOrienter,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: {
                imageReader: createDefaultImageReader(),
                imageWriter: createDefaultImageWriter({ quality: 0.5 }),
                imageOrienter: createDefaultImageOrienter(),
                locale: {
                    ...locale_en_gb,
                    ...plugin_crop_locale_en_gb,
                },
            },
        };
    },

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

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

* [App.svelte](#App-svelte-panel-34)

`<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import {
        createDefaultImageReader,
        createDefaultImageWriter,
        createDefaultImageOrienter,
        setPlugins,
        plugin_crop,
        locale_en_gb,
        plugin_crop_locale_en_gb,
    } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    setPlugins(plugin_crop);

    let editorDefaults = {
        imageReader: createDefaultImageReader(),
        imageWriter: createDefaultImageWriter({ quality: 0.5 }),
        imageOrienter: createDefaultImageOrienter(),
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
        },
    };
</script>

<div>
    <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
</div>

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

* [app.component.ts](#app-component-ts-panel-34)
* [app.component.html](#app-component-html-panel-34)
* [app.component.css](#app-component-css-panel-34)
* [app.module.ts](#app-module-ts-panel-34)

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

import {
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultImageOrienter,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = {
        imageReader: createDefaultImageReader(),
        imageWriter: createDefaultImageWriter({ quality: 0.5 }),
        imageOrienter: createDefaultImageOrienter(),
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
        },
    };
}
`

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

```

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-34)

`<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var {
            createDefaultImageReader,
            createDefaultImageWriter,
            createDefaultImageOrienter,
            setPlugins,
            plugin_crop,
            locale_en_gb,
            plugin_crop_locale_en_gb,
        } = $.fn.pintura;

        setPlugins(plugin_crop);

        var editor = $('#editor').pintura({
            imageReader: createDefaultImageReader(),
            imageWriter: createDefaultImageWriter({ quality: 0.5 }),
            imageOrienter: createDefaultImageOrienter(),
            locale: {
                ...locale_en_gb,
                ...plugin_crop_locale_en_gb,
            },
            src: 'image.jpeg',
        });
    });
</script>
`

If we don't need to output image data, for example when we're only storing the original image and the editor state, we don't have to set the `imageWriter` property.

When using the [default editor factories](../../ui/exports/#default-factories) we don't have to set this property as it's automatically defined.

If we want to pass different configuration options we can set them to the property directly.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-35)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-35)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-35)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-35)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-35)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-35)

* [index.html](#index-html-panel-35)

`<!DOCTYPE html>

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

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

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

<script type="module">
    import {
        appendEditor,
        createDefaultImageReader,
        createDefaultImageOrienter,
        setPlugins,
        plugin_crop,
        locale_en_gb,
        plugin_crop_locale_en_gb,
    } from './pintura.js';

    setPlugins(plugin_crop);

    const editor = appendEditor('#editor', {
        imageReader: createDefaultImageReader(),
        imageWriter: { quality: 0.5 },
        imageOrienter: createDefaultImageOrienter(),
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
        },
        src: 'image.jpeg',
    });
</script>
`

* [App.jsx](#App-jsx-panel-35)
* [App.css](#App-css-panel-35)

`import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import {
    createDefaultImageReader,
    createDefaultImageOrienter,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

const editorDefaults = {
    imageReader: createDefaultImageReader(),
    imageWriter: { quality: 0.5 },
    imageOrienter: createDefaultImageOrienter(),
    locale: {
        ...locale_en_gb,
        ...plugin_crop_locale_en_gb,
    },
};

function App() {
    return (
        <div className="App">
            <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
        </div>
    );
}

export default App;
`

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-35)

`<template>
    <div>
        <PinturaEditor v-bind="editorDefaults" src="image.jpeg" />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
    createDefaultImageReader,
    createDefaultImageOrienter,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: {
                imageReader: createDefaultImageReader(),
                imageWriter: { quality: 0.5 },
                imageOrienter: createDefaultImageOrienter(),
                locale: {
                    ...locale_en_gb,
                    ...plugin_crop_locale_en_gb,
                },
            },
        };
    },

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

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

* [App.svelte](#App-svelte-panel-35)

`<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import {
        createDefaultImageReader,
        createDefaultImageOrienter,
        setPlugins,
        plugin_crop,
        locale_en_gb,
        plugin_crop_locale_en_gb,
    } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    setPlugins(plugin_crop);

    let editorDefaults = {
        imageReader: createDefaultImageReader(),
        imageWriter: { quality: 0.5 },
        imageOrienter: createDefaultImageOrienter(),
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
        },
    };
</script>

<div>
    <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
</div>

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

* [app.component.ts](#app-component-ts-panel-35)
* [app.component.html](#app-component-html-panel-35)
* [app.component.css](#app-component-css-panel-35)
* [app.module.ts](#app-module-ts-panel-35)

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

import {
    createDefaultImageReader,
    createDefaultImageOrienter,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = {
        imageReader: createDefaultImageReader(),
        imageWriter: { quality: 0.5 },
        imageOrienter: createDefaultImageOrienter(),
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
        },
    };
}
`

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

```

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-35)

`<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var {
            createDefaultImageReader,
            createDefaultImageOrienter,
            setPlugins,
            plugin_crop,
            locale_en_gb,
            plugin_crop_locale_en_gb,
        } = $.fn.pintura;

        setPlugins(plugin_crop);

        var editor = $('#editor').pintura({
            imageReader: createDefaultImageReader(),
            imageWriter: { quality: 0.5 },
            imageOrienter: createDefaultImageOrienter(),
            locale: {
                ...locale_en_gb,
                ...plugin_crop_locale_en_gb,
            },
            src: 'image.jpeg',
        });
    });
</script>
`

### imageScrambler

Set to a function that can receive an `ImageData` or `ImageBitmap` object, should return scrambled `ImageData` or an `HTMLCanvasElement`. Used with the `imageRedaction` property and `createDefaultImageScrambler` function to redact information in an image.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-36)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-36)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-36)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-36)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-36)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-36)

* [index.html](#index-html-panel-36)

```html
<!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',
        imageScrambler: (data) =>
            new Promise((resolve) => {
                // Receives current image as ImageData or ImageBitmap

                // Blur here, advise is to return an image with smaller dimensions

                // Resolves with blurred ImageData or HTMLCanvasElement
                resolve(imageData);
            }),
    });
</script>

```

* [App.jsx](#App-jsx-panel-36)
* [App.css](#App-css-panel-36)

`import '@pqina/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'}
                imageScrambler={(data) =>
                    new Promise((resolve) => {
                        // Receives current image as ImageData or ImageBitmap

                        // Blur here, advise is to return an image with smaller dimensions

                        // Resolves with blurred ImageData or HTMLCanvasElement
                        resolve(imageData);
                    })
                }
            />
        </div>
    );
}

export default App;
`

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-36)

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

            imageScrambler: (data) =>
                new Promise((resolve) => {
                    // Receives current image as ImageData or ImageBitmap

                    // Blur here, advise is to return an image with smaller dimensions

                    // Resolves with blurred ImageData or HTMLCanvasElement
                    resolve(imageData);
                }),
        };
    },

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

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

* [App.svelte](#App-svelte-panel-36)

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        imageScrambler={(data) =>
            new Promise((resolve) => {
                // Receives current image as ImageData or ImageBitmap

                // Blur here, advise is to return an image with smaller dimensions

                // Resolves with blurred ImageData or HTMLCanvasElement
                resolve(imageData);
            })}
    />
</div>

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

* [app.component.ts](#app-component-ts-panel-36)
* [app.component.html](#app-component-html-panel-36)
* [app.component.css](#app-component-css-panel-36)
* [app.module.ts](#app-module-ts-panel-36)

```javascript
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();

    imageScrambler: any = (data) =>
        new Promise((resolve) => {
            // Receives current image as ImageData or ImageBitmap

            // Blur here, advise is to return an image with smaller dimensions

            // Resolves with blurred ImageData or HTMLCanvasElement
            resolve(imageData);
        });
}

```

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

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-36)

```html
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            imageScrambler: (data) =>
                new Promise((resolve) => {
                    // Receives current image as ImageData or ImageBitmap

                    // Blur here, advise is to return an image with smaller dimensions

                    // Resolves with blurred ImageData or HTMLCanvasElement
                    resolve(imageData);
                }),
        });
    });
</script>

```

We can import the [createDefaultImageScrambler](../exports/#createdefaultimagescrambler) function and use it to set the `imageScrambler` property to handle scrambling the image data for us.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-37)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-37)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-37)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-37)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-37)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-37)

* [index.html](#index-html-panel-37)

`<!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,
        createDefaultImageScrambler,
    } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        imageScrambler: createDefaultImageScrambler({ scrambleAmount: 2 }),
    });
</script>
`

* [App.jsx](#App-jsx-panel-37)
* [App.css](#App-css-panel-37)

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

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                imageScrambler={createDefaultImageScrambler({
                    scrambleAmount: 2,
                })}
            />
        </div>
    );
}

export default App;
`

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-37)

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

            imageScrambler: createDefaultImageScrambler({ scrambleAmount: 2 }),
        };
    },

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

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

* [App.svelte](#App-svelte-panel-37)

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        imageScrambler={createDefaultImageScrambler({ scrambleAmount: 2 })}
    />
</div>

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

* [app.component.ts](#app-component-ts-panel-37)
* [app.component.html](#app-component-html-panel-37)
* [app.component.css](#app-component-css-panel-37)
* [app.module.ts](#app-module-ts-panel-37)

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

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

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

    imageScrambler: any = createDefaultImageScrambler({ scrambleAmount: 2 });
}
`

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

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-37)

`<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var { createDefaultImageScrambler } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            imageScrambler: createDefaultImageScrambler({ scrambleAmount: 2 }),
        });
    });
</script>
`

When using the [default editor factories](../../ui/exports/#default-factories) we don't have to set this property as it's automatically defined.

If we want to pass different configuration options we can set them to the property directly.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-38)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-38)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-38)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-38)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-38)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-38)

* [index.html](#index-html-panel-38)

`<!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',
        imageScrambler: { scrambleAmount: 2 },
    });
</script>
`

* [App.jsx](#App-jsx-panel-38)
* [App.css](#App-css-panel-38)

`import '@pqina/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'}
                imageScrambler={{ scrambleAmount: 2 }}
            />
        </div>
    );
}

export default App;
`

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-38)

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

            imageScrambler: { scrambleAmount: 2 },
        };
    },

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

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

* [App.svelte](#App-svelte-panel-38)

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        imageScrambler={{ scrambleAmount: 2 }}
    />
</div>

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

* [app.component.ts](#app-component-ts-panel-38)
* [app.component.html](#app-component-html-panel-38)
* [app.component.css](#app-component-css-panel-38)
* [app.module.ts](#app-module-ts-panel-38)

`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();

    imageScrambler: any = { scrambleAmount: 2 };
}
`

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

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-38)

`<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            imageScrambler: { scrambleAmount: 2 },
        });
    });
</script>
`

### shapePreprocessor

The preprocessor used to render composit shapes like lineEnd styles and frames. Use [createDefaultShapePreprocessor](../exports/#createdefaultshapepreprocessor) to set the default preprocessor.

Use [createShapePreprocessor](../exports/#createshapepreprocessor) to create a custom shape preprocessor.

When using the [default editor factories](../../ui/exports/#default-factories) we don't have to set this property as it's automatically defined. We can however set it to a custom shape preprocessor which will then automatically be added to the shape preprocessor list.

If we don't use lineEnd styles and frame styles we don't need a shapePreprocessor and we can leave this property undefined.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-39)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-39)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-39)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-39)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-39)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-39)

* [index.html](#index-html-panel-39)

`<!DOCTYPE html>

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

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

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

<script type="module">
    import {
        appendEditor,
        createDefaultImageReader,
        createDefaultImageWriter,
        createDefaultImageOrienter,
        createDefaultShapePreprocessor,
        setPlugins,
        plugin_crop,
        locale_en_gb,
        plugin_crop_locale_en_gb,
    } from './pintura.js';

    setPlugins(plugin_crop);

    const editor = appendEditor('#editor', {
        imageReader: createDefaultImageReader(),
        imageWriter: createDefaultImageWriter(),
        imageOrienter: createDefaultImageOrienter(),
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
        },
        src: 'image.jpeg',
        shapePreprocessor: createDefaultShapePreprocessor(),
    });
</script>
`

* [App.jsx](#App-jsx-panel-39)
* [App.css](#App-css-panel-39)

`import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import {
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultImageOrienter,
    createDefaultShapePreprocessor,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

const editorDefaults = {
    imageReader: createDefaultImageReader(),
    imageWriter: createDefaultImageWriter(),
    imageOrienter: createDefaultImageOrienter(),
    locale: {
        ...locale_en_gb,
        ...plugin_crop_locale_en_gb,
    },
};

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                shapePreprocessor={createDefaultShapePreprocessor()}
            />
        </div>
    );
}

export default App;
`

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-39)

`<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :shapePreprocessor="shapePreprocessor"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultImageOrienter,
    createDefaultShapePreprocessor,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: {
                imageReader: createDefaultImageReader(),
                imageWriter: createDefaultImageWriter(),
                imageOrienter: createDefaultImageOrienter(),
                locale: {
                    ...locale_en_gb,
                    ...plugin_crop_locale_en_gb,
                },
            },

            shapePreprocessor: createDefaultShapePreprocessor(),
        };
    },

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

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

* [App.svelte](#App-svelte-panel-39)

`<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import {
        createDefaultImageReader,
        createDefaultImageWriter,
        createDefaultImageOrienter,
        createDefaultShapePreprocessor,
        setPlugins,
        plugin_crop,
        locale_en_gb,
        plugin_crop_locale_en_gb,
    } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    setPlugins(plugin_crop);

    let editorDefaults = {
        imageReader: createDefaultImageReader(),
        imageWriter: createDefaultImageWriter(),
        imageOrienter: createDefaultImageOrienter(),
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
        },
    };
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        shapePreprocessor={createDefaultShapePreprocessor()}
    />
</div>

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

* [app.component.ts](#app-component-ts-panel-39)
* [app.component.html](#app-component-html-panel-39)
* [app.component.css](#app-component-css-panel-39)
* [app.module.ts](#app-module-ts-panel-39)

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

import {
    createDefaultImageReader,
    createDefaultImageWriter,
    createDefaultImageOrienter,
    createDefaultShapePreprocessor,
    setPlugins,
    plugin_crop,
    locale_en_gb,
    plugin_crop_locale_en_gb,
} from '@pqina/pintura';

setPlugins(plugin_crop);

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = {
        imageReader: createDefaultImageReader(),
        imageWriter: createDefaultImageWriter(),
        imageOrienter: createDefaultImageOrienter(),
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
        },
    };

    shapePreprocessor: any = createDefaultShapePreprocessor();
}
`

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

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-39)

`<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var {
            createDefaultImageReader,
            createDefaultImageWriter,
            createDefaultImageOrienter,
            createDefaultShapePreprocessor,
            setPlugins,
            plugin_crop,
            locale_en_gb,
            plugin_crop_locale_en_gb,
        } = $.fn.pintura;

        setPlugins(plugin_crop);

        var editor = $('#editor').pintura({
            imageReader: createDefaultImageReader(),
            imageWriter: createDefaultImageWriter(),
            imageOrienter: createDefaultImageOrienter(),
            locale: {
                ...locale_en_gb,
                ...plugin_crop_locale_en_gb,
            },
            src: 'image.jpeg',
            shapePreprocessor: createDefaultShapePreprocessor(),
        });
    });
</script>
`

Adding a custom shape preprocessor when using one of the default factories. See [createShapePreprocessor](../exports/#createshapepreprocessor) for the function signature.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-40)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-40)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-40)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-40)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-40)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-40)

* [index.html](#index-html-panel-40)

`<!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',
        shapePreprocessor: [
            // custom shape preprocessor
            (shape, options) => {
                // process shape here
            },

            // another custom shape preprocessor
        ],
    });
</script>
`

* [App.jsx](#App-jsx-panel-40)
* [App.css](#App-css-panel-40)

`import '@pqina/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'}
                shapePreprocessor={[
                    // custom shape preprocessor
                    (shape, options) => {
                        // process shape here
                    },

                    // another custom shape preprocessor
                ]}
            />
        </div>
    );
}

export default App;
`

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-40)

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

            shapePreprocessor: [
                // custom shape preprocessor
                (shape, options) => {
                    // process shape here
                },

                // another custom shape preprocessor
            ],
        };
    },

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

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

* [App.svelte](#App-svelte-panel-40)

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        shapePreprocessor={[
            // custom shape preprocessor
            (shape, options) => {
                // process shape here
            },

            // another custom shape preprocessor
        ]}
    />
</div>

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

* [app.component.ts](#app-component-ts-panel-40)
* [app.component.html](#app-component-html-panel-40)
* [app.component.css](#app-component-css-panel-40)
* [app.module.ts](#app-module-ts-panel-40)

`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();

    shapePreprocessor: any = [
        // custom shape preprocessor
        (shape, options) => {
            // process shape here
        },

        // another custom shape preprocessor
    ];
}
`

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

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-40)

`<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            shapePreprocessor: [
                // custom shape preprocessor
                (shape, options) => {
                    // process shape here
                },

                // another custom shape preprocessor
            ],
        });
    });
</script>
`

### imageCrop

The current crop rectangle is relative to the (optionally rotated) bounding box of the image.

In the diagram below we can see how this works. We've defined a `64 x 64` crop in the top left corner of the image.

* The dashed line illustrates the bounding box of the rotated image.
* The magenta square represents our 64 × 64 crop positioned relative to the image bounding box.

We can see how the crop rectangle updates when we rotate the image using the range input.

If we assign options to the editor creation command the crop will be set first and then the rotation. In the example below, no matter the order of the properties, the crop will be set first and then the image will be rotated.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-41)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-41)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-41)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-41)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-41)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-41)

* [index.html](#index-html-panel-41)

```html
<!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, degToRad } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',

        // 2. Rotate the image
        imageRotation: degToRad(45),

        // 1. Crop 64 x 64 image from top left corner
        imageCrop: {
            x: 0,
            y: 0,
            width: 64,
            height: 64,
        },
    });
</script>

```

* [App.jsx](#App-jsx-panel-41)
* [App.css](#App-css-panel-41)

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

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                // 2. Rotate the image
                imageRotation={degToRad(45)}
                // 1. Crop 64 x 64 image from top left corner
                imageCrop={{
                    x: 0,
                    y: 0,
                    width: 64,
                    height: 64,
                }}
            />
        </div>
    );
}

export default App;

```

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-41)

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

            // 2. Rotate the image
            imageRotation: degToRad(45),

            // 1. Crop 64 x 64 image from top left corner
            imageCrop: {
                x: 0,
                y: 0,
                width: 64,
                height: 64,
            },
        };
    },

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

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

```

* [App.svelte](#App-svelte-panel-41)

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        imageRotation={/* 2. Rotate the image */
        degToRad(45)}
        imageCrop={/* 1. Crop 64 x 64 image from top left corner */
        {
            x: 0,
            y: 0,
            width: 64,
            height: 64,
        }}
    />
</div>

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

```

* [app.component.ts](#app-component-ts-panel-41)
* [app.component.html](#app-component-html-panel-41)
* [app.component.css](#app-component-css-panel-41)
* [app.module.ts](#app-module-ts-panel-41)

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

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

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

    // 2. Rotate the image
    imageRotation: any = degToRad(45);

    // 1. Crop 64 x 64 image from top left corner
    imageCrop: any = {
        x: 0,
        y: 0,
        width: 64,
        height: 64,
    };
}

```

```html
<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [imageRotation]="imageRotation"
    [imageCrop]="imageCrop"
></pintura-editor>

```

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-41)

```html
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var { degToRad } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',

            // 2. Rotate the image
            imageRotation: degToRad(45),

            // 1. Crop 64 x 64 image from top left corner
            imageCrop: {
                x: 0,
                y: 0,
                width: 64,
                height: 64,
            },
        });
    });
</script>

```

### imageRotation

The rotation of the image in radians. Use the [degToRad](../../ui/exports/#degtorad) export to set this property in degrees.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-42)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-42)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-42)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-42)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-42)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-42)

* [index.html](#index-html-panel-42)

```html
<!DOCTYPE html>

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

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

<button type="button" id="buttonRotateImage">Rotate image</button>

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

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

    const buttonRotateImage = document.querySelector('#buttonRotateImage');

    const editor = appendDefaultEditor('#editor', { src: 'image.jpeg' });

    buttonRotateImage.addEventListener('click', () => {
        editor.imageRotation += Math.PI / 4;
    });
</script>

```

* [App.jsx](#App-jsx-panel-42)
* [App.css](#App-css-panel-42)

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

const editorDefaults = getEditorDefaults();

function App() {
    const handleButtonClick = () => {
        editorRef.current.editor.imageRotation += Math.PI / 4;
    };

    return (
        <div className="App">
            <button type="button" onClick={handleButtonClick}>
                Rotate image
            </button>

            <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
        </div>
    );
}

export default App;

```

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-42)

```html
<template>
    <div>
        <button type="button" v-on:click="handleButtonClick($event)">
            Rotate image
        </button>

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

    methods: {
        handleButtonClick: function () {
            this.$refs.editor.editor.imageRotation += Math.PI / 4;
        },
    },
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

```

* [App.svelte](#App-svelte-panel-42)

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

    let editorDefaults = getEditorDefaults();

    const handleButtonClick = () => {
        editor.imageRotation += Math.PI / 4;
    };
</script>

<div>
    <button type="button" on:click={handleButtonClick}>Rotate image</button>

    <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
</div>

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

```

* [app.component.ts](#app-component-ts-panel-42)
* [app.component.html](#app-component-html-panel-42)
* [app.component.css](#app-component-css-panel-42)
* [app.module.ts](#app-module-ts-panel-42)

```javascript
import { Component, ViewChild } from '@angular/core';

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

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

    editorDefaults: any = getEditorDefaults();

    handleButtonClick(): void {
        this.editor.editor.imageRotation += Math.PI / 4;
    }
}

```

```html
<button #buttonRotateImage type="button" (click)="handleButtonClick()">
    Rotate image
</button>

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

```

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-42)

```html
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

<button type="button" id="buttonRotateImage">Rotate image</button>

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var buttonRotateImage = $('#buttonRotateImage');

        var editor = $('#editor').pinturaDefault({ src: 'image.jpeg' });

        buttonRotateImage.on('click', function () {
            editor.imageRotation += Math.PI / 4;
        });
    });
</script>

```

### imageCropAspectRatio

Set the aspect ratio of the crop as a number.

When not set, it defaults to `undefined` meaning a crop aspect ratio won't be enforced.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-43)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-43)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-43)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-43)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-43)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-43)

* [index.html](#index-html-panel-43)

```html
<!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',

        // Enforce widescreen 16:9 aspect ratio
        imageCropAspectRatio: 16 / 9,
    });
</script>

```

* [App.jsx](#App-jsx-panel-43)
* [App.css](#App-css-panel-43)

`import '@pqina/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'}
                // Enforce widescreen 16:9 aspect ratio
                imageCropAspectRatio={16 / 9}
            />
        </div>
    );
}

export default App;
`

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-43)

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

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

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

* [App.svelte](#App-svelte-panel-43)

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        imageCropAspectRatio={/* Enforce widescreen 16:9 aspect ratio */
        16 / 9}
    />
</div>

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

* [app.component.ts](#app-component-ts-panel-43)
* [app.component.html](#app-component-html-panel-43)
* [app.component.css](#app-component-css-panel-43)
* [app.module.ts](#app-module-ts-panel-43)

```javascript
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();
}

```

`<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [imageCropAspectRatio]="16 / 9"
></pintura-editor>
`

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-43)

```html
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',

            // Enforce widescreen 16:9 aspect ratio
            imageCropAspectRatio: 16 / 9,
        });
    });
</script>

```

### imageCropMinSize

A `Size` describing The minimum size of the crop. Defaults to `{ width: 1, height: 1 }`. Pintura will prevent loading smaller images.

### imageCropMaxSize

A `Size` describing The maximum size of the crop. Defaults to `{ width: 32768, height: 32768 }`.

### imageFlipX

Flip image over X axis.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-44)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-44)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-44)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-44)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-44)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-44)

* [index.html](#index-html-panel-44)

```html
<!DOCTYPE html>

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

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

<button type="button" id="buttonFlipImage">Flip image</button>

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

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

    const buttonFlipImage = document.querySelector('#buttonFlipImage');

    const editor = appendDefaultEditor('#editor', { src: 'image.jpeg' });

    buttonFlipImage.addEventListener('click', () => {
        editor.imageFlipX = !editor.imageFlipX;
    });
</script>

```

* [App.jsx](#App-jsx-panel-44)
* [App.css](#App-css-panel-44)

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

const editorDefaults = getEditorDefaults();

function App() {
    const handleButtonClick = () => {
        editorRef.current.editor.imageFlipX =
            !editorRef.current.editor.imageFlipX;
    };

    return (
        <div className="App">
            <button type="button" onClick={handleButtonClick}>
                Flip image
            </button>

            <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
        </div>
    );
}

export default App;

```

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-44)

```html
<template>
    <div>
        <button type="button" v-on:click="handleButtonClick($event)">
            Flip image
        </button>

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

    methods: {
        handleButtonClick: function () {
            this.$refs.editor.editor.imageFlipX =
                !this.$refs.editor.editor.imageFlipX;
        },
    },
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

```

* [App.svelte](#App-svelte-panel-44)

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

    let editorDefaults = getEditorDefaults();

    const handleButtonClick = () => {
        editor.imageFlipX = !editor.imageFlipX;
    };
</script>

<div>
    <button type="button" on:click={handleButtonClick}>Flip image</button>

    <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
</div>

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

```

* [app.component.ts](#app-component-ts-panel-44)
* [app.component.html](#app-component-html-panel-44)
* [app.component.css](#app-component-css-panel-44)
* [app.module.ts](#app-module-ts-panel-44)

```javascript
import { Component, ViewChild } from '@angular/core';

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

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

    editorDefaults: any = getEditorDefaults();

    handleButtonClick(): void {
        this.editor.editor.imageFlipX = !this.editor.editor.imageFlipX;
    }
}

```

```html
<button #buttonFlipImage type="button" (click)="handleButtonClick()">
    Flip image
</button>

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

```

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-44)

```html
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

<button type="button" id="buttonFlipImage">Flip image</button>

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var buttonFlipImage = $('#buttonFlipImage');

        var editor = $('#editor').pinturaDefault({ src: 'image.jpeg' });

        buttonFlipImage.on('click', function () {
            $(editor).pintura('imageFlipX', !$(editor).pintura('imageFlipX'));
        });
    });
</script>

```

### imageFlipY

Flip image over Y axis.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-45)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-45)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-45)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-45)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-45)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-45)

* [index.html](#index-html-panel-45)

```html
<!DOCTYPE html>

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

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

<button type="button" id="buttonFlipImage">Flip image</button>

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

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

    const buttonFlipImage = document.querySelector('#buttonFlipImage');

    const editor = appendDefaultEditor('#editor', { src: 'image.jpeg' });

    buttonFlipImage.addEventListener('click', () => {
        editor.imageFlipY = !editor.imageFlipY;
    });
</script>

```

* [App.jsx](#App-jsx-panel-45)
* [App.css](#App-css-panel-45)

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

const editorDefaults = getEditorDefaults();

function App() {
    const handleButtonClick = () => {
        editorRef.current.editor.imageFlipY =
            !editorRef.current.editor.imageFlipY;
    };

    return (
        <div className="App">
            <button type="button" onClick={handleButtonClick}>
                Flip image
            </button>

            <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
        </div>
    );
}

export default App;

```

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-45)

```html
<template>
    <div>
        <button type="button" v-on:click="handleButtonClick($event)">
            Flip image
        </button>

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

    methods: {
        handleButtonClick: function () {
            this.$refs.editor.editor.imageFlipY =
                !this.$refs.editor.editor.imageFlipY;
        },
    },
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

```

* [App.svelte](#App-svelte-panel-45)

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

    let editorDefaults = getEditorDefaults();

    const handleButtonClick = () => {
        editor.imageFlipY = !editor.imageFlipY;
    };
</script>

<div>
    <button type="button" on:click={handleButtonClick}>Flip image</button>

    <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
</div>

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

```

* [app.component.ts](#app-component-ts-panel-45)
* [app.component.html](#app-component-html-panel-45)
* [app.component.css](#app-component-css-panel-45)
* [app.module.ts](#app-module-ts-panel-45)

```javascript
import { Component, ViewChild } from '@angular/core';

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

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

    editorDefaults: any = getEditorDefaults();

    handleButtonClick(): void {
        this.editor.editor.imageFlipY = !this.editor.editor.imageFlipY;
    }
}

```

```html
<button #buttonFlipImage type="button" (click)="handleButtonClick()">
    Flip image
</button>

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

```

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-45)

```html
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

<button type="button" id="buttonFlipImage">Flip image</button>

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var buttonFlipImage = $('#buttonFlipImage');

        var editor = $('#editor').pinturaDefault({ src: 'image.jpeg' });

        buttonFlipImage.on('click', function () {
            $(editor).pintura('imageFlipY', !$(editor).pintura('imageFlipY'));
        });
    });
</script>

```

### imageTargetSize

A size `{ width: number, height: number }` describing the output size of the image, this value is visible in the Resize plugin input fields.

If you want all images to be resized to a certain size it's better to use the `targetSize` property on the `imageWriter` to set a size that is invisible to the user.

### imageCropLimitToImage

Defaults to `true`, when set to `true` Pintura Image Editor will prevent cropping outside of

When set to `false` we can make a crop outside of the image edges. This also means we can zoom out further and rotate the image without auto zoom. To control the background color of pixels outside of the image we can set the [imageBackgroundColor](#imagebackgroundcolor) prop.

### imageRedaction

Set to an array of rectangular shapes to redact parts of the image. If the image is rotated or flipped, the redactions rotate and flip with the image.

See the [updating shapes](../../markup-editor/shapes/#working-with-shapes) section on how to add, remove or update redaction shapes.

### imageAnnotation

Set to an array of [shapes](../../markup-editor/shapes/) to draw them in the image context. If the image is rotated or flipped, the shapes rotate and flip with the image.

See the [updating shapes](../../markup-editor/shapes/#working-with-shapes) section on how to add, remove or update shapes.

### imageDecoration

Set to an array of [shapes](../../markup-editor/shapes/) to draw them in the crop context. If the image is rotated or flipped, the shapes stay where they are. If the crop rectangle is changed, the shape positions are updated as well.

See the [updating shapes](../../markup-editor/shapes/#working-with-shapes) section on how to add, remove or update shapes.

### imageFrame

Can be set to a `frameStyle` to select an initial frame style.

When using frames we need to set the [shapePreprocessor](#shapepreprocessor) property, either set the defaults or define your own custom frame styles.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-46)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-46)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-46)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-46)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-46)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-46)

* [index.html](#index-html-panel-46)

`<!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',
        imageFrame: {
            // the key of the frame in the menu
            id: 'polaroid',

            // the style of the frame
            frameStyle: 'polaroid',

            // current style properties
            frameColor: [1, 1, 1],
        },
    });
</script>
`

* [App.jsx](#App-jsx-panel-46)
* [App.css](#App-css-panel-46)

`import '@pqina/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'}
                imageFrame={{
                    // the key of the frame in the menu
                    id: 'polaroid',

                    // the style of the frame
                    frameStyle: 'polaroid',

                    // current style properties
                    frameColor: [1, 1, 1],
                }}
            />
        </div>
    );
}

export default App;
`

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-46)

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

            imageFrame: {
                // the key of the frame in the menu
                id: 'polaroid',

                // the style of the frame
                frameStyle: 'polaroid',

                // current style properties
                frameColor: [1, 1, 1],
            },
        };
    },

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

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

* [App.svelte](#App-svelte-panel-46)

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        imageFrame={{
            // the key of the frame in the menu
            id: 'polaroid',

            // the style of the frame
            frameStyle: 'polaroid',

            // current style properties
            frameColor: [1, 1, 1],
        }}
    />
</div>

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

* [app.component.ts](#app-component-ts-panel-46)
* [app.component.html](#app-component-html-panel-46)
* [app.component.css](#app-component-css-panel-46)
* [app.module.ts](#app-module-ts-panel-46)

`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();

    imageFrame: any = {
        // the key of the frame in the menu
        id: 'polaroid',

        // the style of the frame
        frameStyle: 'polaroid',

        // current style properties
        frameColor: [1, 1, 1],
    };
}
`

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

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-46)

`<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            imageFrame: {
                // the key of the frame in the menu
                id: 'polaroid',

                // the style of the frame
                frameStyle: 'polaroid',

                // current style properties
                frameColor: [1, 1, 1],
            },
        });
    });
</script>
`

### imageColorMatrix

A color matrix to apply to the image. The `imageColorMatrix` property contains multiple color matrices for both the filter settings and finetune color settings.

To set a [custom color matrix](../../plugins/filter/#filterfunctions), assign it like shown below.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-47)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-47)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-47)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-47)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-47)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-47)

* [index.html](#index-html-panel-47)

`<!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',
        imageColorMatrix: {
            // prettier-ignore
            filter: [
                    0.75, 0.25, 0.25, 0, 0,
                    0.25, 0.75, 0.25, 0, 0,
                    0.25, 0.25, 0.75, 0, 0,
                    0,    0,    0,    1, 0
                ],
        },
    });
</script>
`

* [App.jsx](#App-jsx-panel-47)
* [App.css](#App-css-panel-47)

`import '@pqina/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'}
                imageColorMatrix={{
                    // prettier-ignore
                    filter: [
                    0.75, 0.25, 0.25, 0, 0,
                    0.25, 0.75, 0.25, 0, 0,
                    0.25, 0.25, 0.75, 0, 0,
                    0,    0,    0,    1, 0
                ],
                }}
            />
        </div>
    );
}

export default App;
`

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-47)

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

            imageColorMatrix: {
                // prettier-ignore
                filter: [
                    0.75, 0.25, 0.25, 0, 0,
                    0.25, 0.75, 0.25, 0, 0,
                    0.25, 0.25, 0.75, 0, 0,
                    0,    0,    0,    1, 0
                ],
            },
        };
    },

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

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

* [App.svelte](#App-svelte-panel-47)

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        imageColorMatrix={{
            // prettier-ignore
            filter: [
                    0.75, 0.25, 0.25, 0, 0,
                    0.25, 0.75, 0.25, 0, 0,
                    0.25, 0.25, 0.75, 0, 0,
                    0,    0,    0,    1, 0
                ],
        }}
    />
</div>

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

* [app.component.ts](#app-component-ts-panel-47)
* [app.component.html](#app-component-html-panel-47)
* [app.component.css](#app-component-css-panel-47)
* [app.module.ts](#app-module-ts-panel-47)

`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();

    imageColorMatrix: any = {
        // prettier-ignore
        filter: [
                    0.75, 0.25, 0.25, 0, 0,
                    0.25, 0.75, 0.25, 0, 0,
                    0.25, 0.25, 0.75, 0, 0,
                    0,    0,    0,    1, 0
                ],
    };
}
`

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

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-47)

`<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            imageColorMatrix: {
                // prettier-ignore
                filter: [
                    0.75, 0.25, 0.25, 0, 0,
                    0.25, 0.75, 0.25, 0, 0,
                    0.25, 0.25, 0.75, 0, 0,
                    0,    0,    0,    1, 0
                ],
            },
        });
    });
</script>
`

### imageGamma

The image gamma adjustment, a value between `0.15` and `4`.

### imageVignette

The vignette to apply to the image, a value between `-1` and `1`, a positive value indicating a dark vignette and a negative value a bright vignette.

### imageBackgroundColor

Set the background color to use for the output image and the image preview in the editor.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-48)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-48)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-48)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-48)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-48)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-48)

* [index.html](#index-html-panel-48)

`<!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',
        imageBackgroundColor: [1, 0, 0],
    });
</script>
`

* [App.jsx](#App-jsx-panel-48)
* [App.css](#App-css-panel-48)

`import '@pqina/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'}
                imageBackgroundColor={[1, 0, 0]}
            />
        </div>
    );
}

export default App;
`

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-48)

`<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :imageBackgroundColor="[1, 0, 0]"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

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

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

* [App.svelte](#App-svelte-panel-48)

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        imageBackgroundColor={[1, 0, 0]}
    />
</div>

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

* [app.component.ts](#app-component-ts-panel-48)
* [app.component.html](#app-component-html-panel-48)
* [app.component.css](#app-component-css-panel-48)
* [app.module.ts](#app-module-ts-panel-48)

```javascript
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();
}

```

`<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [imageBackgroundColor]="[1, 0, 0]"
></pintura-editor>
`

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-48)

`<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            imageBackgroundColor: [1, 0, 0],
        });
    });
</script>
`

If we like a more familiar way of setting colors we can use the [colorStringToColorArray](../../ui/exports/#colorstringtocolorarray) method exported by the Pintura Image Editor module.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-49)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-49)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-49)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-49)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-49)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-49)

* [index.html](#index-html-panel-49)

`<!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, colorStringToColorArray } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        imageBackgroundColor: colorStringToColorArray('rgba(255, 0, 0, .5)'),
    });
</script>
`

* [App.jsx](#App-jsx-panel-49)
* [App.css](#App-css-panel-49)

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

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                imageBackgroundColor={colorStringToColorArray(
                    'rgba(255, 0, 0, .5)'
                )}
            />
        </div>
    );
}

export default App;
`

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-49)

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

            imageBackgroundColor: colorStringToColorArray(
                'rgba(255, 0, 0, .5)'
            ),
        };
    },

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

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

* [App.svelte](#App-svelte-panel-49)

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        imageBackgroundColor={colorStringToColorArray('rgba(255, 0, 0, .5)')}
    />
</div>

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

* [app.component.ts](#app-component-ts-panel-49)
* [app.component.html](#app-component-html-panel-49)
* [app.component.css](#app-component-css-panel-49)
* [app.module.ts](#app-module-ts-panel-49)

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

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

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

    imageBackgroundColor: any = colorStringToColorArray('rgba(255, 0, 0, .5)');
}
`

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

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

```

```javascript
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 {}

```

* [index.html](#index-html-panel-49)

`<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var { colorStringToColorArray } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            imageBackgroundColor: colorStringToColorArray(
                'rgba(255, 0, 0, .5)'
            ),
        });
    });
</script>
`

Transparent background colors are supported for the output image but at the moment the image rendering in the editor itself isn't fully accurate.

### imageBackgroundImage

Set to a background image to render behind the crop. Accepts the same source types as the image [src](#src) property.

The image will be centered and scaled to cover the output image dimensions.

### imageBackgroundFilterMode

Defaults to `'none'`, set to `'image'` to apply filters and effects to the background image.

### imageState

The `imageState` property describes the current image state.

You can pass the `imageState` object to the `loadImage` method or store it and later use it to set the `imageState` to restore a previous state. The `imageState` is also returned after processing an image.

An example `imageState` object is shown below.

```js
{
    // transforms
    flipX: false,
    flipY: false,
    rotation: 0,
    crop: { x: 0, y: 0, width: 1024, height: 768 },
    cropAspectRatio: undefined,
    cropMinSize: { width: 1, height: 1 },
    cropMaxSize: { width: 32767, height: 32767 },
    cropLimitToImage: true,

    // shapes
    annotation: [
        {
            id: 'lme6159vp',
            x: 32,
            y: 64,
            width: 320,
            height: 256,
            backgroundColor: [1, 0, 0],
            strokeColor: [1, 1, 1, 0],
            strokeWidth: 0,
            cornerRadius: 0,
        }
    ],
    decoration: [],
    manipulation: [],
    redaction: [],
    selection: [],
    frame: undefined,

    // filters
    colorMatrix: undefined,
    convolutionMatrix: undefined,
    gamma: undefined,
    vignette: undefined,

    // output
    backgroundColor: [0, 0, 0, 0],
    backgroundImage: undefined,
    targetSize: undefined,

    // custom
    metadata: undefined,

    // video
    trim: undefined,
    volume: 1,
    minDuration: 0,
    maxDuration: undefined,
    currentTime: undefined
}
```