Pintura Image Editor v8.89.6

Detecting and cropping faces in images

By combining Pintura Image Editor with Smartcrop.js we can automatically move the crop rectangle to the most prominent subject in the image.

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

    editor.on('load', (imageState) => {
        // Please note that this example doesn't include smartcrop it'll have to be added manually.

        // Create a normal image and send it to smartcrop.js
        const image = new Image();
        image.src = URL.createObjectURL(imageState.dest);
        image.onload = async () => {
            // Calculate the smart crop rectangle, set aspect ratio to 3:4
            const { topCrop } = await smartcrop.crop(image, {
                width: 3,
                height: 4,
            });

            // Update the editor crop
            editor.imageCrop = topCrop;
        };
    });
</script>

App.jsx
App.css

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

const editorDefaults = getEditorDefaults();

function App() {
    const editorRef = useRef(null);

    const handleEditorLoad = (imageState) => {
        // Please note that this example doesn't include smartcrop it'll have to be added manually.

        // Create a normal image and send it to smartcrop.js
        const image = new Image();
        image.src = URL.createObjectURL(imageState.dest);
        image.onload = async () => {
            // Calculate the smart crop rectangle, set aspect ratio to 3:4
            const { topCrop } = await smartcrop.crop(image, {
                width: 3,
                height: 4,
            });

            // Update the editor crop
            editorRef.current.editor.imageCrop = topCrop;
        };
    };

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

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            ref="editor"
            v-bind="editorDefaults"
            src="image.jpeg"
            v-on:pintura:load="handleEditorLoad($event)"
        />
    </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: {
        handleEditorLoad: function (imageState) {
            // Please note that this example doesn't include smartcrop it'll have to be added manually.

            // Create a normal image and send it to smartcrop.js
            const image = new Image();
            image.src = URL.createObjectURL(imageState.dest);
            image.onload = async () => {
                // Calculate the smart crop rectangle, set aspect ratio to 3:4
                const { topCrop } = await smartcrop.crop(image, {
                    width: 3,
                    height: 4,
                });

                // Update the editor crop
                this.$refs.editor.editor.imageCrop = topCrop;
            };
        },
    },
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

App.svelte

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

    let editorDefaults = getEditorDefaults();

    let editor;

    const handleEditorLoad = (event) => {
        const imageState = event.detail;

        {
            // Please note that this example doesn't include smartcrop it'll have to be added manually.

            // Create a normal image and send it to smartcrop.js
            const image = new Image();
            image.src = URL.createObjectURL(imageState.dest);
            image.onload = async () => {
                // Calculate the smart crop rectangle, set aspect ratio to 3:4
                const { topCrop } = await smartcrop.crop(image, {
                    width: 3,
                    height: 4,
                });

                // Update the editor crop
                editor.imageCrop = topCrop;
            };
        }
    };
</script>

<div>
    <PinturaEditor
        bind:this={editor}
        {...editorDefaults}
        src={'image.jpeg'}
        on:load={handleEditorLoad}
    />
</div>

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

import { Component, ViewChild } 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) {}

    @ViewChild('editor') editor?: any;

    editorDefaults: any = getEditorDefaults();

    handleEditorLoad(imageState: any): void {
        // Please note that this example doesn't include smartcrop it'll have to be added manually.

        // Create a normal image and send it to smartcrop.js
        const image = new Image();
        image.src = <string>(
            this.domSanitizer.bypassSecurityTrustResourceUrl(
                URL.createObjectURL(imageState.dest)
            )
        );
        image.onload = async () => {
            // Calculate the smart crop rectangle, set aspect ratio to 3:4
            const { topCrop } = await smartcrop.crop(image, {
                width: 3,
                height: 4,
            });

            // Update the editor crop
            this.editor.editor.imageCrop = topCrop;
        };
    }
}

<pintura-editor
    #editor
    [options]="editorDefaults"
    src="image.jpeg"
    (load)="handleEditorLoad($event)"
></pintura-editor>

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

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

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

index.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:load', function (event) {
            const imageState = event.detail;

            {
                // Please note that this example doesn't include smartcrop it'll have to be added manually.

                // Create a normal image and send it to smartcrop.js
                const image = new Image();
                image.src = URL.createObjectURL(imageState.dest);
                image.onload = async () => {
                    // Calculate the smart crop rectangle, set aspect ratio to 3:4
                    const { topCrop } = await smartcrop.crop(image, {
                        width: 3,
                        height: 4,
                    });

                    // Update the editor crop
                    $(editor).pintura('imageCrop', topCrop);
                };
            }
        });
    });
</script>