# ImageFiltersPlugin

## Content

# Class: ImageFiltersPlugin

Image Filters Plugin.
Adds the "Image Filters" button.

## Example

```html
<script src="gcimageviewer.js"></script></head>
<script src="plugins/imageFilters.js"></script>
<script>
  const viewer = new GcImageViewer("#root");
  viewer.addPlugin(new ImageFiltersPlugin());
</script>
```

## Properties

### viewer

```ts
viewer: ImageViewerAPI;
```

Gets the image viewer instance.
The image viewer instance.

#### Implementation of

```ts
ImageFiltersPluginAPI.viewer
```

***

### options

```ts
options: ImageFiltersPluginOptions;
```

Plugin options

#### Implementation of

```ts
ImageFiltersPluginAPI.options
```

***

### filters

```ts
filters: Record<string, ImageFilterDefinition>;
```

Gets available image filters.

#### Example

```javascript
// Create Image Filters plugin:
const imageFiltersPlugin = new ImageFiltersPlugin();
// Remove the default image filters, except for the "Invert" filter:
const filters = imageFiltersPlugin.filters;
for(const filterName in filters) {
	if(filterName === "invert")
		continue;
	delete filters[filterName];
}
// Add custom Image Filter:
filters["lemon-effect"] = {
   filterId: "lemon-effect",
   toolbarKey: "lemon-effect",
   title: "Apply Custom Lemon effect",
   text: "Apply Lemon effect",
   action: function(imageData) {
       for (i = 0; i < imageData.data.length; i += 4) {
          imageData.data[i + 1] = imageData.data[i] + 45; // increase green component
       }
       return imageData;
   }
};
// Register Image Filters plugin:
viewer.addPlugin(imageFiltersPlugin);
```

#### Implementation of

```ts
ImageFiltersPluginAPI.filters
```

***

### paintLayer

```ts
paintLayer: ImageLayer;
```

Gets the paint layer containing the HTML canvas for drawing the image.

#### Implementation of

```ts
ImageFiltersPluginAPI.paintLayer
```

***

### isReady

```ts
isReady: boolean;
```

Returns true if the image is loaded into the viewer and the image format is supported by the Image Filters plugin.

#### Implementation of

```ts
ImageFiltersPluginAPI.isReady
```

***

### naturalSize

```ts
naturalSize: Size;
```

Natural image size.

#### Implementation of

```ts
ImageFiltersPluginAPI.naturalSize
```

***

### id

```ts
id: PluginType;
```

Unique plug-in identifier.

#### Implementation of

```ts
ImageFiltersPluginAPI.id
```

## Methods

### confirmChanges()

```ts
confirmChanges(): boolean | void | Promise<boolean | void>;
```

Called when parent viewer requests confirm and apply changes, usually when the Ctrl+Enter or Enter key is pressed.

#### Returns

`boolean` \| `void` \| `Promise`&lt;`boolean` \| `void`&gt;

#### Implementation of

```ts
ImageFiltersPluginAPI.confirmChanges
```

***

### cancelChanges()

```ts
cancelChanges(): boolean | void | Promise<boolean | void>;
```

Called when parent viewer requests cancel changes, usually when the ESCAPE key is pressed.

#### Returns

`boolean` \| `void` \| `Promise`&lt;`boolean` \| `void`&gt;

#### Implementation of

```ts
ImageFiltersPluginAPI.cancelChanges
```

***

### undoTransactionStep()

```ts
undoTransactionStep(): boolean | void;
```

Undo viewer transaction step. Return true if undo operation is consumed.

#### Returns

`boolean` \| `void`

#### Implementation of

```ts
ImageFiltersPluginAPI.undoTransactionStep
```

***

### redoTransactionStep()

```ts
redoTransactionStep(): boolean | void;
```

Redo viewer transaction step. Return true if redo operation is consumed.

#### Returns

`boolean` \| `void`

#### Implementation of

```ts
ImageFiltersPluginAPI.redoTransactionStep
```

***

### applyFilter()

```ts
applyFilter(filterName, intensity?): Promise<boolean>;
```

Apply image filter.

#### Parameters

##### filterName

`string`

Filter name to apply.

##### intensity?

`number`

Filter intensity.

#### Returns

`Promise`&lt;`boolean`&gt;

True if filter was applied successfully.

#### Implementation of

```ts
ImageFiltersPluginAPI.applyFilter
```

***

### isImageFormatSupported()

```ts
isImageFormatSupported(imageFormat, allowUnknown?): boolean;
```

Determines whether the specified image format is supported for modifications.

#### Parameters

##### imageFormat

The image format to check, either as an enum value or string.

`string` | `ImageFormatCode`

##### allowUnknown?

`boolean`

If true, allows unknown formats (ImageFormatCode.Default) to be considered supported.

#### Returns

`boolean`

True if the format is supported for modifications, false otherwise.

#### Remarks

The following formats are explicitly not supported:
- TIFF (ImageFormatCode.TIFF)
- SVG (ImageFormatCode.SVG)
- ICO (ImageFormatCode.ICO)
- GIF (ImageFormatCode.GIF)

#### Examples

```ts
// Check if PNG is supported
const supported = isImageFormatSupported(ImageFormatCode.PNG);
```

```ts
// Check if an unknown format is supported (returns false by default)
const supported = isImageFormatSupported('custom-format');
```

```ts
// Check if an unknown format is supported (returns true when allowUnknown is true)
const supported = isImageFormatSupported('custom-format', true);
```

#### Implementation of

```ts
ImageFiltersPluginAPI.isImageFormatSupported
```

***

### dispose()

```ts
dispose(): void;
```

Cleans up resources and disposes the plugin.

#### Returns

`void`

#### Implementation of

```ts
ImageFiltersPluginAPI.dispose
```

***

### removePaintLayer()

```ts
removePaintLayer(): void;
```

Removes and disposes the active paint layer. If no paint layer exists, this method does nothing.

#### Returns

`void`

#### Implementation of

```ts
ImageFiltersPluginAPI.removePaintLayer
```

***

### initialize()

```ts
initialize(viewer): void;
```

The method is called when the GcImageViewer component is initialized.

#### Parameters

##### viewer

[`ImageViewerAPI`](../interfaces/ImageViewerAPI)

#### Returns

`void`

#### Implementation of

```ts
ImageFiltersPluginAPI.initialize
```