# Image Manipulation Methods
A list of methods to update the image state.
| Name | Description |
| --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [editImage(src, options?)](#editimage) | Load an image. Returns a Promise that resolves when the image is processed. |
| [loadImage(src, options?)](#loadimage) | Load an image. Returns a Promise that resolves when the image is loaded. |
| abortLoadImage() | Stop loading the current image. |
| [removeImage()](#removeimage) | Removes the currently loaded image. |
| [processImage(src?, options?)](#processimage) | Start processing the current image. Or loads a new image and immidiately processes it. |
| abortProcessImage() | Stop processing the current image. |
| [updateImage(src)](#updateimage) | Updates the current image source while retaining history state. Will also update image preview. Returns a Promise that resolves when the image is loaded. |
## loadImage
Loads the supplied image. Returns a `Promise` that resolves with the [imageReaderOutput](../exports/#createdefaultimagereader) object when the image has loaded.
* [ JavaScript](#javascript-panel-0)
* [ React](#react-panel-0)
* [ Vue](#vue-panel-0)
* [ Svelte](#svelte-panel-0)
* [ Angular](#angular-panel-0)
* [ 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 handleButtonClick = () => {
editorRef.current.editor
.loadImage('image.jpeg')
.then((imageReaderResult) => {
// Logs loaded image data
console.log(imageReaderResult);
});
};
return (
```
* [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 { getEditorDefaults } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
@ViewChild('buttonLoadImage') buttonLoadImage?: any;
@ViewChild('editor') editor?: any;
editorDefaults: any = getEditorDefaults();
handleButtonClick(): void {
this.editor.editor.loadImage('image.jpeg').then((imageReaderResult) => {
// Logs loaded image data
console.log(imageReaderResult);
});
}
}
```
```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
```
As a second parameter we can either pass an [imageState](../properties/#imagestate) object or a set of image transform instructions.
```js
editorInstance
.loadImage('image.jpeg', {
// Rotate transform instruction
imageRotation: Math.PI / 2,
})
.then((imageReaderOutput) => {
// Image has loaded and has been rotated
});
```
Alternatively update the editor [src](../properties/#src) property to load a new image.
## removeImage
Removes the currently loaded image.
## updateImage
Replaces the current image with a new image while retaining history state. We can use this method in situations where we need to modify the source image data.
An example could be removing the image background using a third-party service.
The source image would be sent to the third-party service and then be returned to us, we can then use `updateImage` to replace the source image with the newly created image.
If the service offers a preview mode we can use [updateImagePreview](../../ui/methods/#updateimagepreview) to only replace the preview of the image.
`updateImage` returns a Promise that resolves when the image has been updated.
* [ JavaScript](#javascript-panel-2)
* [ React](#react-panel-2)
* [ Vue](#vue-panel-2)
* [ Svelte](#svelte-panel-2)
* [ Angular](#angular-panel-2)
* [ jQuery](#jquery-panel-2)
* [index.html](#index-html-panel-2)
```html
```
* [App.jsx](#App-jsx-panel-2)
* [App.css](#App-css-panel-2)
```jsx
import '@pqina/pintura/pintura.css';
import './App.css';
import { useRef } from 'react';
import { PinturaEditor } from '@pqina/react-pintura';
import {
getEditorDefaults,
createNode,
appendNode,
findNode,
} from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
const editorRef = useRef(null);
const willRenderToolbar = (toolbar) => {
// find the group of buttons to add our custom button to
const buttonGroup = findNode('alpha-set', toolbar);
// create a custom button
const removeBackgroundButton = createNode(
'Button',
'remove-background-button',
{
label: 'Remove background',
onclick: async () => {
// disable input
editorRef.current.editor.disabled = true;
// now loading
editorRef.current.editor.status = 'Uploading data…';
// post image to background removal service
const formData = new FormData();
formData.append(
'image',
editorRef.current.editor.imageFile,
editorRef.current.editor.imageFile.name
);
// request removal of background
const newImage = fetch('remove-the-background', {
method: 'POST',
body: formData,
}).then((res) => res.blob());
// done loading
editorRef.current.editor.status = undefined;
// update the image with the newly received transparent image
editorRef.current.editor.updateImage(newImage);
},
}
);
// add the button to the toolbar
appendNode(removeBackgroundButton, buttonGroup);
// clone the toolbar array when returning to Pintura
return [...toolbar];
};
return (
```
* [app.component.ts](#app-component-ts-panel-5)
* [app.component.html](#app-component-html-panel-5)
* [app.component.css](#app-component-css-panel-5)
* [app.module.ts](#app-module-ts-panel-5)
```javascript
import { Component, ViewChild } from '@angular/core';
import { processImage, getEditorDefaults } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
@ViewChild('buttonProcessImage') buttonProcessImage?: any;
@ViewChild('editor') editor?: any;
editorDefaults: any = getEditorDefaults();
handleButtonClick(): void {
this.editor.editor.processImage().then((imageWriterResult) => {
// Logs resulting image
console.log(imageWriterResult);
});
}
}
```
```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-5)
```html
```
First argument can also be an image transform instructions object or [imageState](../properties/#imagestate).
```js
editorInstance
.processImage({ imageRotation: Math.PI / 2 })
.then((imageWriterOutput) => {
// Rotation has been applied to current image and the image has been processed
});
```
As a second parameter we can either pass an [imageState](../properties/#imagestate) object or a set of image transform instructions.
This loads a new image and processes it with the given instructions
```js
editorInstance
.processImage('image.jpeg', {
imageRotation: Math.PI / 2,
})
.then((imageWriterOutput) => {
// New image was loaded, rotation has been applied, and the image has been processed
});
```
When we want to process images without showing the editor interface we can use the exported [processImage](../exports/#processimage) function.