# Detecting and cropping faces in images By combining Pintura Image Editor with [Smartcrop.js](https://github.com/jwagner/smartcrop.js/) we can automatically move the crop rectangle to the most prominent subject in the image. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-0) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-0) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-0) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-0) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-0) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-0) * [index.html](#index-html-panel-0) ```html

``` * [App.jsx](#App-jsx-panel-0) * [App.css](#App-css-panel-0) ```jsx 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 (

); } export default App; ``` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-0) ```html ``` * [App.svelte](#App-svelte-panel-0) ```svelte

``` * [app.component.ts](#app-component-ts-panel-0) * [app.component.html](#app-component-html-panel-0) * [app.component.css](#app-component-css-panel-0) * [app.module.ts](#app-module-ts-panel-0) ```javascript 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 = ( 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; }; } } ``` ```html ``` ```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-0) ```html

```