Pintura Image Editor

https://pqina.nl/pintura/docs/
Admin
Pintura Image Editor is a JavaScript component that brings powerful image editing directly to the...
Tokens:18,114
Snippets:68
Trust Score:9.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Angular Module Setup

Source: https://pqina.nl/pintura/docs/v8/examples/image-preview

This TypeScript code sets up the main Angular module, importing necessary modules like BrowserModule and AngularPinturaModule, and declaring the AppComponent.

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

--------------------------------

### Angular Module Setup

Source: https://pqina.nl/pintura/docs/v8/api/ui/exports

Demonstrates the Angular module setup, including importing BrowserModule and AngularPinturaModule, and declaring the root component.

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

--------------------------------

### Angular Module Setup

Source: https://pqina.nl/pintura/docs/v8/api/exports

Demonstrates the Angular module setup, including importing BrowserModule and AngularPinturaModule, and declaring the root component.

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

--------------------------------

### Angular Pintura Module Setup

Source: https://pqina.nl/pintura/docs/v8/api/ui/exports

Shows the necessary imports and module setup for using Pintura within an Angular application via the `@pqina/angular-pintura` module.

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

--------------------------------

### Angular Component Setup

Source: https://pqina.nl/pintura/docs/v8/api/exports

Sets up an Angular component to use the Pintura editor, including default options and a custom toolbar rendering function.

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

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

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

    willRenderToolbar = (nodeList: any): PinturaNode[] => {
        // So we can browse through the nodes in the developer console
        console.log(nodeList);

        // Find the export button
        const exportButton = findNode('export', nodeList);

        // Replace the label
        exportButton[2].label = 'Save';

        // Always show the label
        exportButton[2].hideLabel = false;

        return nodeList;
    };
}
```

--------------------------------

### Angular Component Setup

Source: https://pqina.nl/pintura/docs/v8/api/ui/exports

Demonstrates how to set up an Angular component to use Pintura editor. It includes importing necessary modules, defining editor defaults, and a function to customize the toolbar.

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

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

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

    willRenderToolbar = (nodeList: any): PinturaNode[] => {
        // So we can browse through the nodes in the developer console
        console.log(nodeList);

        // Find the export button
        const exportButton = findNode('export', nodeList);

        // Update the save property
        updateNode(exportButton, { label: 'Save', hideLabel: false });

        return nodeList;
    };
}
```

--------------------------------

### Angular Component Setup

Source: https://pqina.nl/pintura/docs/v8/api/ui/exports

Sets up an Angular component to use the Pintura editor, including default options and a custom toolbar rendering function.

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

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

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

    willRenderToolbar = (nodeList: any): PinturaNode[] => {
        // So we can browse through the nodes in the developer console
        console.log(nodeList);

        // Find the export button
        const exportButton = findNode('export', nodeList);

        // Replace the label
        exportButton[2].label = 'Save';

        // Always show the label
        exportButton[2].hideLabel = false;

        return nodeList;
    };
}
```

--------------------------------

### Angular Component Setup

Source: https://pqina.nl/pintura/docs/v8/api/exports

Demonstrates how to set up an Angular component to use Pintura editor. It includes importing necessary modules, defining editor defaults, and a function to customize the toolbar.

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

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

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

    willRenderToolbar = (nodeList: any): PinturaNode[] => {
        // So we can browse through the nodes in the developer console
        console.log(nodeList);

        // Find the export button
        const exportButton = findNode('export', nodeList);

        // Update the save property
        updateNode(exportButton, { label: 'Save', hideLabel: false });

        return nodeList;
    };
}
```

--------------------------------

### Angular Module Setup

Source: https://pqina.nl/pintura/docs/v8/api/exports

Configures the main Angular module to include the Pintura editor module and the application component.

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

--------------------------------

### Angular Pintura Module Setup

Source: https://pqina.nl/pintura/docs/v8/api/exports

Configuration for the Angular module that integrates Pintura. It imports necessary modules like BrowserModule and AngularPinturaModule.

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

--------------------------------

### Angular Component for Pintura Editor

Source: https://pqina.nl/pintura/docs/v8/api/plugins/crop

This Angular component demonstrates how to use the Pintura editor with custom crop guides. It utilizes the `getEditorDefaults` function and defines a method `cropWillRenderImageSelectionGuides` to customize the rendering of image selection guides during different interactions like rotation.

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

    cropWillRenderImageSelectionGuides = (
        interaction: string,
        interactionFraction: number
    ): { rows: number; cols: number; opacity: number } => {
        const isRotating = interaction === 'rotate';
        return {
            rows: isRotating ? 5 : 3,
            cols: isRotating ? 5 : 3,
            opacity: interactionFraction * 0.25,
        };
    };
}
```

--------------------------------

### Angular Module Setup

Source: https://pqina.nl/pintura/docs/v8/api/ui/exports

Configures the main Angular module to include the Pintura editor module and the application component.

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

--------------------------------

### jQuery Image Preview Integration

Source: https://pqina.nl/pintura/docs/v8/examples/image-preview

This JavaScript code demonstrates how to integrate Pintura Image Editor using jQuery. It includes necessary script imports, sets up the editor on a div, and handles the image processing event to update an image tag.

```javascript
<!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>

<img src="" alt="" />

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            imageWriter: {
                targetSize: {
                    width: 256,
                    height: 256,
                },
            },
        });

        editor.on('pintura:process', function (event) {
            const imageState = event.detail;
            $('img').attr('src', URL.createObjectURL(imageState.dest));
        });
    });
</script>
```

--------------------------------

### Angular Module Setup for Pintura

Source: https://pqina.nl/pintura/docs/v8/api/markup-editor/properties

Shows the necessary setup for the `AngularPinturaModule` within an Angular application's `AppModule`. This ensures that the Pintura editor components are available for use.

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

--------------------------------

### Angular Module Setup

Source: https://pqina.nl/pintura/docs/v8/api/image-editor/properties

Configures the main Angular module to include the Pintura editor functionality. It imports BrowserModule and AngularPinturaModule, and declares the AppComponent.

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

--------------------------------

### Angular Module Setup for Pintura

Source: https://pqina.nl/pintura/docs/v8/api/plugins/crop

This Angular module configuration sets up the application to use Pintura. It imports `BrowserModule` and `AngularPinturaModule`, declares the `AppComponent`, and specifies `AppComponent` as the bootstrap component.

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

--------------------------------

### HTML Structure and jQuery Integration for Pintura

Source: https://pqina.nl/pintura/docs/v8/api/plugins/crop

This HTML file sets up the basic structure for using Pintura with jQuery. It includes the necessary Pintura CSS and JavaScript files, along with jQuery and a Pintura jQuery adapter. It then initializes the Pintura editor on a div with the ID 'editor' and customizes the crop guides.

```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',
            cropWillRenderImageSelectionGuides: (
                interaction,
                interactionFraction
            ) => {
                const isRotating = interaction === 'rotate';
                return {
                    rows: isRotating ? 5 : 3,
                    cols: isRotating ? 5 : 3,
                    opacity: interactionFraction * 0.25,
                };
            },
        });
    });
</script>
```

--------------------------------

### Angular Module Setup

Source: https://pqina.nl/pintura/docs/v8/api/image-editor/exports

Configures the Angular module to use the Pintura editor. It imports necessary modules like BrowserModule and AngularPinturaModule, declares the AppComponent, and bootstraps the application with AppComponent.

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

```

--------------------------------

### Svelte Sticker Configuration

Source: https://pqina.nl/pintura/docs/v8/api/markup-editor/stickers

Illustrates how to use Pintura stickers within a Svelte component. This example shows the basic structure for integrating the editor and configuring stickers.

```svelte
<script>
    // Import necessary components and functions from Pintura
    // import { PinturaEditor } from '@pqina/svelte-pintura'; // Assuming a Svelte adapter exists
    // import { getEditorDefaults, Sticker } from '@pqina/pintura';

    // Placeholder for Svelte implementation details
    // const editorDefaults = getEditorDefaults();
    // const stickers = [
    //     {
    //         thumb: './stickers/logo.png',
    //         alt: 'Firefox logo',
    //         shape: {
    //             width: 100,
    //             height: 100,
    //             aspectRatio: 1,
    //             backgroundImage: './stickers/logo-high-resolution.png',
    //         },
    //     },
    // ];
</script>

<!-- Svelte template structure would go here -->
<!-- <PinturaEditor {...editorDefaults} src="image.jpeg" stickers={stickers} /> -->

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

--------------------------------

### Angular Component Styles

Source: https://pqina.nl/pintura/docs/v8/examples/image-preview

This CSS code provides styling for the Pintura editor within an Angular application, specifically setting the height of the editor element.

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

--------------------------------

### Angular Module Setup for Pintura

Source: https://pqina.nl/pintura/docs/v8/api/markup-editor/exports

Illustrates the `AppModule` configuration for integrating Pintura into an Angular project. It imports `BrowserModule`, `AppComponent`, and `AngularPinturaModule`.

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

--------------------------------

### React Sticker Configuration

Source: https://pqina.nl/pintura/docs/v8/api/markup-editor/stickers

Shows how to integrate Pintura's sticker functionality within a React application. It utilizes the `PinturaEditor` component and demonstrates the same advanced sticker configuration as the JavaScript example.

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

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App"><PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                stickers={[
                    // Advanced Sticker configuration
                    // - `thumb` is used as the thumbnail for the sticker list
                    // - `backgroundImage` is used for the sticker
                    // - The editor will use the shape `width`, `height`, and `aspectRatio`
                    {
                        thumb: './stickers/logo.png', // can also be an Emoji
                        alt: 'Firefox logo',
                        shape: {
                            // a shape definition, the position of the sthape will be set by the editor
                            width: 100,
                            height: 100,
                            aspectRatio: 1,
                            backgroundImage:
                                './stickers/logo-high-resolution.png',
                        },
                    },
                ]}
            /></div>
    );
}

export default App;

// Basic CSS for the editor
// .pintura-editor { height: 600px; }
```

--------------------------------

### Angular Image Preview Component

Source: https://pqina.nl/pintura/docs/v8/examples/image-preview

This TypeScript code defines an Angular component for the Pintura Image Editor. It configures editor defaults, handles the image processing event, and sanitizes the output URL for display.

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

import { DomSanitizer } from '@angular/platform-browser';

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    constructor(private domSanitizer: DomSanitizer) {}

    editorResult?: string = undefined;

    editorDefaults: any = getEditorDefaults({
        imageWriter: {
            targetSize: {
                width: 256,
                height: 256,
            },
        },
    });

    handleEditorProcess(imageState: any): void {
        this.editorResult = <string>(
            this.domSanitizer.bypassSecurityTrustResourceUrl(
                URL.createObjectURL(imageState.dest)
            )
        );
    }
}
```

--------------------------------

### Custom CSS for Pintura Editor

Source: https://pqina.nl/pintura/docs/v8/api/image-editor/exports

Applies custom styles to the Pintura editor component using CSS. This example sets a fixed height for the editor.

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

```

--------------------------------

### Angular Module Setup for Pintura

Source: https://pqina.nl/pintura/docs/v8/api/image-editor/events

Shows the NgModule configuration for an Angular application that uses Pintura. It imports necessary modules like BrowserModule, AngularPinturaModule, and declares the AppComponent.

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

--------------------------------

### Angular Image Preview Template

Source: https://pqina.nl/pintura/docs/v8/examples/image-preview

This HTML template is used with the Angular component. It conditionally displays the processed image and includes the Pintura editor component, binding its options and handling the process event.

```html
<img *ngIf="editorResult" [src]="editorResult" alt="" />

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    (process)="handleEditorProcess($event)"
></pintura-editor>
```

--------------------------------

### Angular Template for Pintura Editor

Source: https://pqina.nl/pintura/docs/v8/api/plugins/crop

This is the Angular template snippet that integrates the Pintura editor into the application. It binds the editor options and the custom crop guide rendering function to the `pintura-editor` component.

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

--------------------------------

### Vue Sticker Configuration

Source: https://pqina.nl/pintura/docs/v8/api/markup-editor/stickers

Provides an example of implementing Pintura stickers in a Vue.js application. It uses the `PinturaEditor` component and configures stickers within the component's data properties.

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

            stickers: [
                // Advanced Sticker configuration
                // - `thumb` is used as the thumbnail for the sticker list
                // - `backgroundImage` is used for the sticker
                // - The editor will use the shape `width`, `height`, and `aspectRatio`
                {
                    thumb: './stickers/logo.png', // can also be an Emoji
                    alt: 'Firefox logo',
                    shape: {
                        // a shape definition, the position of the sthape will be set by the editor
                        width: 100,
                        height: 100,
                        aspectRatio: 1,
                        backgroundImage: './stickers/logo-high-resolution.png',
                    },
                },
            ],
        };
    },

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

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

--------------------------------

### jQuery Pintura Editor Integration

Source: https://pqina.nl/pintura/docs/v8/api/markup-editor/properties

Provides an example of integrating the Pintura editor using jQuery. It includes setting up the editor with custom options and the `willRenderShapeControls` callback for manipulating shape controls.

```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',
            willRenderShapeControls: (controls, selectedShapeId) => {
                console.log('willRenderShapeControls', selectedShapeId);

                // Manipulate or add controls here

                return controls;
            },
        });
    });
</script>
```

--------------------------------

### jQuery Pintura Editor Load Progress Event

Source: https://pqina.nl/pintura/docs/v8/api/image-editor/events

This snippet demonstrates how to initialize and handle the 'loadprogress' event for the Pintura image editor using jQuery. It includes the necessary script includes and event listener setup.

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

        editor.on('pintura:loadprogress', function (event) {
            const task = event.detail;

            console.log(task);
            // logs: { index: 0, task: 'any-to-file', taskProgress: 0, taskLengthComputable: false, timeStamp: 1614589213257 }
        });
    });
</script>
```

--------------------------------

### jQuery Pintura Editor Integration

Source: https://pqina.nl/pintura/docs/v8/api/image-editor/properties

Demonstrates initializing the Pintura image editor using jQuery. It includes loading necessary scripts, setting up the editor with image source, rotation, and crop properties.

```javascript
<!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>
```

--------------------------------

### jQuery Pintura Editor Integration

Source: https://pqina.nl/pintura/docs/v8/api/exports

Demonstrates how to initialize and use the Pintura editor with jQuery. It includes loading necessary scripts, setting up the editor with custom options, and adding a custom node to the toolbar.

```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 { createNode, appendNode } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            willRenderToolbar: (nodeList) => {
                // So we can browse through the nodes in the developer console
                console.log(nodeList);

                // Adds a node to the end of the nodeList
                appendNode(
                    createNode('div', 'my-div', {
                        textContent: 'Hello World',
                    }),
                    nodeList
                );

                return nodeList;
            },
        });
    });
</script>
```

--------------------------------

### Pintura Editor Initialization and Event Handling (HTML/JavaScript)

Source: https://pqina.nl/pintura/docs/v8/api/markup-editor/events

Initializes the Pintura editor with a default configuration and demonstrates how to subscribe to the 'pintura:addshape' event to log shape details. Includes necessary script and style includes.

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

        editor.on('pintura:addshape', function (event) {
            const shape = event.detail;

            console.log('addshape', shape);
        });
    });
</script>
```

--------------------------------

### Pintura Markup Editor Initialization and Event Handling

Source: https://pqina.nl/pintura/docs/v8/api/markup-editor/events

Initializes the Pintura Markup Editor using jQuery and demonstrates how to listen for the 'pintura:tapshape' event.

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

        editor.on('pintura:tapshape', function (event) {
            const shape = event.detail;

            console.log('tapshape', shape);
        });
    });
</script>
```

--------------------------------

### jQuery Editor Integration

Source: https://pqina.nl/pintura/docs/v8/api/exports

Illustrates how to initialize and use the Pintura editor with jQuery. It includes loading necessary scripts, setting up the editor with options, and customizing the toolbar.

```javascript
<!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 { findNode } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            willRenderToolbar: (nodeList) => {
                // So we can browse through the nodes in the developer console
                console.log(nodeList);

                // Find the export button
                const exportButton = findNode('export', nodeList);

                // Update the save property
                updateNode(exportButton, { label: 'Save', hideLabel: false });

                return nodeList;
            },
        });
    });
</script>
```

--------------------------------

### jQuery Pintura Editor Integration

Source: https://pqina.nl/pintura/docs/v8/api/ui/exports

Demonstrates integrating the Pintura editor using jQuery. It includes loading necessary scripts and initializing the editor with custom toolbar rendering logic.

```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 { createNode, appendNode } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            willRenderToolbar: (nodeList) => {
                // So we can browse through the nodes in the developer console
                console.log(nodeList);

                // Adds a node to the end of the nodeList
                appendNode(
                    createNode('div', 'my-div', {
                        textContent: 'Hello World',
                    }),
                    nodeList
                );

                return nodeList;
            },
        });
    });
</script>
```

--------------------------------

### Pintura Editor Styling in Angular

Source: https://pqina.nl/pintura/docs/v8/api/markup-editor/exports

Provides CSS to style the Pintura editor component within an Angular application. This example uses `::ng-deep` to apply a specific height to the editor.

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

--------------------------------

### jQuery Editor Integration

Source: https://pqina.nl/pintura/docs/v8/api/ui/exports

Illustrates how to initialize and use the Pintura editor with jQuery. It includes loading necessary scripts, setting up the editor with options, and customizing the toolbar.

```javascript
<!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 { findNode } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            willRenderToolbar: (nodeList) => {
                // So we can browse through the nodes in the developer console
                console.log(nodeList);

                // Find the export button
                const exportButton = findNode('export', nodeList);

                // Update the save property
                updateNode(exportButton, { label: 'Save', hideLabel: false });

                return nodeList;
            },
        });
    });
</script>
```

--------------------------------

### jQuery Image Editor Integration

Source: https://pqina.nl/pintura/docs/v8/api/image-editor/exports

Shows how to initialize and use the Pintura Image Editor with jQuery. It includes loading necessary scripts, setting up the editor with custom options like image writing, and applying styles.

```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',
            imageWriter: {
                store: (state, options, onprogress) =>
                    new Promise((resolve, reject) => {
                        const { dest } = state;

                        // create a formdata object to send to the server
                        const formData = new FormData();
                        formData.append('image', dest, dest.name);

                        // create a request object
                        const request = new XMLHttpRequest();
                        request.open('POST', './upload');

                        // show progress in interface
                        request.upload.onprogress = onprogress;

                        // catch errors
                        request.onerror = () =>
                            reject('oh no something went wrong!');
                        request.ontimeout = () =>
                            reject('oh no request timed out!');

                        // handle success state
                        request.onload = () => {
                            if (request.status >= 200 && request.status < 300) {
                                // store request in state so it can be accessed by other processes
                                state.store = request;
                                resolve(state);
                            } else {
                                reject('oh no something went wrong!');
                            }
                        };

                        // start uploading the image
                        request.send(formData);
                    }),
            },
        });
    });
</script>

```

--------------------------------

### Plain HTML with jQuery Integration

Source: https://pqina.nl/pintura/docs/v8/api/exports

Integrates the Pintura editor into a plain HTML page using jQuery. It includes script tags for Pintura and jQuery, and demonstrates initializing the editor with custom toolbar logic.

```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 { findNode } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            willRenderToolbar: (nodeList) => {
                // So we can browse through the nodes in the developer console
                console.log(nodeList);

                // Find the export button
                const exportButton = findNode('export', nodeList);

                // Replace the label
                exportButton[2].label = 'Save';

                // Always show the label
                exportButton[2].hideLabel = false;

                return nodeList;
            },
        });
    });
</script>
```

--------------------------------

### Plain HTML with jQuery Integration

Source: https://pqina.nl/pintura/docs/v8/api/ui/exports

Integrates the Pintura editor into a plain HTML page using jQuery. It includes script tags for Pintura and jQuery, and demonstrates initializing the editor with custom toolbar logic.

```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 { findNode } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            willRenderToolbar: (nodeList) => {
                // So we can browse through the nodes in the developer console
                console.log(nodeList);

                // Find the export button
                const exportButton = findNode('export', nodeList);

                // Replace the label
                exportButton[2].label = 'Save';

                // Always show the label
                exportButton[2].hideLabel = false;

                return nodeList;
            },
        });
    });
</script>
```

--------------------------------

### Angular Pintura Editor Component

Source: https://pqina.nl/pintura/docs/v8/api/exports

Demonstrates how to set up and use the Pintura editor within an Angular component. It shows default editor options, custom toolbar rendering logic, and how to append custom nodes.

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

import {
    getEditorDefaults,
    createNode,
    appendNode,
    PinturaNode,
} from '@pqina/pintura';

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

    willRenderToolbar = (nodeList: any): PinturaNode[] => {
        // So we can browse through the nodes in the developer console
        console.log(nodeList);

        // Adds a node to the end of the nodeList
        appendNode(
            createNode('div', 'my-div', {
                textContent: 'Hello World',
            }),
            nodeList
        );

        return nodeList;
    };
}
```

--------------------------------

### Angular Pintura Editor Integration

Source: https://pqina.nl/pintura/docs/v8/api/ui/exports

Demonstrates how to integrate the Pintura editor into an Angular application. It shows how to use `getEditorDefaults` for options and `willRenderToolbar` to manipulate the toolbar nodes.

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

import {
    getEditorDefaults,
    createNode,
    appendNode,
    PinturaNode,
} from '@pqina/pintura';

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

    willRenderToolbar = (nodeList: any): PinturaNode[] => {
        // So we can browse through the nodes in the developer console
        console.log(nodeList);

        // Adds a node to the end of the nodeList
        appendNode(
            createNode('div', 'my-div', {
                textContent: 'Hello World',
            }),
            nodeList
        );

        return nodeList;
    };
}
```

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

--------------------------------

### JavaScript Sticker Configuration

Source: https://pqina.nl/pintura/docs/v8/api/markup-editor/stickers

Demonstrates how to configure custom stickers using plain JavaScript with the Pintura editor. It shows the structure for defining sticker thumbnails, alternative text, and shape properties like dimensions and background images.

```javascript
import { appendDefaultEditor, Sticker } from './pintura.js';

const editor = appendDefaultEditor('#editor', {
    src: 'image.jpeg',
    stickers: [
        // Advanced Sticker configuration
        // - `thumb` is used as the thumbnail for the sticker list
        // - `backgroundImage` is used for the sticker
        // - The editor will use the shape `width`, `height`, and `aspectRatio`
        {
            thumb: './stickers/logo.png', // can also be an Emoji
            alt: 'Firefox logo',
            shape: {
                // a shape definition, the position of the sthape will be set by the editor
                width: 100,
                height: 100,
                aspectRatio: 1,
                backgroundImage: './stickers/logo-high-resolution.png',
            },
        },
    ],
});

// Basic CSS for the editor
// .pintura-editor { height: 600px; }
```

--------------------------------

### Angular Editor Integration

Source: https://pqina.nl/pintura/docs/v8/api/exports

Shows how to use the Pintura editor component within an Angular template, binding editor options and the custom toolbar rendering function.

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

--------------------------------

### Angular HTML Template

Source: https://pqina.nl/pintura/docs/v8/api/exports

The HTML template for an Angular application, demonstrating how to bind Pintura editor options and the custom toolbar function.

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

--------------------------------

### Angular HTML Template

Source: https://pqina.nl/pintura/docs/v8/api/ui/exports

The HTML template for an Angular application, demonstrating how to bind Pintura editor options and the custom toolbar function.

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

--------------------------------

### jQuery Integration with Pintura Markup Editor

Source: https://pqina.nl/pintura/docs/v8/api/markup-editor/exports

Demonstrates integrating the Pintura Markup Editor using jQuery. It includes setting up the editor with default options, custom shape style controls, and font family options, along with basic styling.

```javascript
<!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 { createMarkupEditorShapeStyleControls } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            markupEditorShapeStyleControls:
                createMarkupEditorShapeStyleControls({
                    fontFamilyOptions: [
                        ['arial', 'Arial'],
                        ['open-sans', 'Open Sans'],
                        ['courier', 'Courier'],
                        // Define additional custom fonts here
                    ],
                }),
        });
    });
</script>
```
Tokens:
Raw