Crop square images by setting a fixed crop aspect ratio

We can use the imageCropAspectRatio property to instruct the editor to make a crop in a fixed aspect ratio.

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

        // This will result in a square crop
        imageCropAspectRatio: 1,
    });
</script>

App.jsx
App.css

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'}
                // This will result in a square crop
                imageCropAspectRatio={1}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :imageCropAspectRatio="1"
        />
    </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

<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={/* This will result in a square crop */
        1}
    />
</div>

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

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

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

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

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [imageCropAspectRatio]="1"
></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',

            // This will result in a square crop
            imageCropAspectRatio: 1,
        });
    });
</script>

If we wanted to make a crop in a different aspect ratio, for example 16:9 we'd simply pass it to the imageCropAspectRatio property like this:

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

        // This will result in a 16:9 crop
        imageCropAspectRatio: 16 / 9,
    });
</script>

App.jsx
App.css

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'}
                // This will result in a 16:9 crop
                imageCropAspectRatio={16 / 9}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<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

<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={/* This will result in a 16:9 crop */
        16 / 9}
    />
</div>

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

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

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

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

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [imageCropAspectRatio]="16 / 9"
></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',

            // This will result in a 16:9 crop
            imageCropAspectRatio: 16 / 9,
        });
    });
</script>

If we wanted to offer the user different crop options we'd pass them like this, the editor will automatically select the current imageCropAspectRatio in the cropSelectPresetOptions dropdown.

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

        // This will result in a 16:9 crop
        imageCropAspectRatio: 16 / 9,

        // Offer different crop options
        cropSelectPresetOptions: [
            [undefined, 'Custom'],
            [1, 'Square'],
            [16 / 9, '16:9'],
            [4 / 3, '4:3'],
        ],
    });
</script>

App.jsx
App.css

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'}
                // This will result in a 16:9 crop
                imageCropAspectRatio={16 / 9}
                // Offer different crop options
                cropSelectPresetOptions={[
                    [undefined, 'Custom'],
                    [1, 'Square'],
                    [16 / 9, '16:9'],
                    [4 / 3, '4:3'],
                ]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

            // Offer different crop options
            cropSelectPresetOptions: [
                [undefined, 'Custom'],
                [1, 'Square'],
                [16 / 9, '16:9'],
                [4 / 3, '4:3'],
            ],
        };
    },

    methods: {},
};
</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();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        imageCropAspectRatio={/* This will result in a 16:9 crop */
        16 / 9}
        cropSelectPresetOptions={/* Offer different crop options */

        [
            [undefined, 'Custom'],
            [1, 'Square'],
            [16 / 9, '16:9'],
            [4 / 3, '4:3'],
        ]}
    />
</div>

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

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

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

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

    // Offer different crop options
    cropSelectPresetOptions: any = [
        [undefined, 'Custom'],
        [1, 'Square'],
        [16 / 9, '16:9'],
        [4 / 3, '4:3'],
    ];
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [imageCropAspectRatio]="16 / 9"
    [cropSelectPresetOptions]="cropSelectPresetOptions"
></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',

            // This will result in a 16:9 crop
            imageCropAspectRatio: 16 / 9,

            // Offer different crop options
            cropSelectPresetOptions: [
                [undefined, 'Custom'],
                [1, 'Square'],
                [16 / 9, '16:9'],
                [4 / 3, '4:3'],
            ],
        });
    });
</script>