---
title: "ImageItem | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ImageItem.Namespace.ImageItem/"
---

# ImageItem

> - [ImageSource](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ImageItem.ImageItem.Namespace.ImageSource.md)

## Namespaces

## Enumerations

### ImageSourceType

#### Enumeration Members

| Enumeration Member | Value |
| ------ | ------ |
|  `File` | `1` |
|  `None` | `0` |
|  `PublicImage` | `5` |
|  `StorageId` | `3` |
|  `Url` | `4` |
|  `UserImage` | `6` |

## Classes

### ImageItemValue

#### Implements

- [`IEqualsReady`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Utils-2.md#iequalsready)

#### Constructors

##### Constructor

```ts
new ImageItemValue(
   name, 
   value, 
   transformedRectangle?): ImageItemValue;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `name` | `string` |
| `value` | [`ImageMetaData`](#imagemetadata) |
| `transformedRectangle?` | [`RotatedRectangleF`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/RotatedRectangleF.md#rotatedrectanglef) |

###### Returns

[`ImageItemValue`](#imageitemvalue)

#### Properties

##### name

```ts
name: string;
```

##### transformedRectangle?

```ts
optional transformedRectangle?: RotatedRectangleF;
```

##### value

```ts
value: ImageMetaData;
```

#### Methods

##### clone()

```ts
clone(): ImageItemValue;
```

###### Returns

[`ImageItemValue`](#imageitemvalue)

##### equals()

```ts
equals(other): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | [`ImageItemValue`](#imageitemvalue) |

###### Returns

`any`

###### Implementation of

[`IEqualsReady`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Utils-2.md#iequalsready).[`equals`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Utils-2.md#equals)

***

### ImageMetaData

#### Implements

- [`IEqualsReady`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Utils-2.md#iequalsready)

#### Constructors

##### Constructor

```ts
new ImageMetaData(rawData): ImageMetaData;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `rawData` | `Object` |

###### Returns

[`ImageMetaData`](#imagemetadata)

#### Properties

##### height

```ts
height: number;
```

##### id

```ts
id: string;
```

##### isVector

```ts
isVector: boolean;
```

##### width

```ts
width: number;
```

#### Methods

##### clone()

```ts
clone(): ImageMetaData;
```

###### Returns

[`ImageMetaData`](#imagemetadata)

##### equals()

```ts
equals(other): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | [`ImageMetaData`](#imagemetadata) |

###### Returns

`any`

###### Implementation of

[`IEqualsReady`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Utils-2.md#iequalsready).[`equals`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Utils-2.md#equals)

***

### ImageSource

#### Implements

- [`INotifyPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#inotifypropertychanged)\<[`ImageSource`](#imagesource), `string`\>
- [`IEqualsReady`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Utils-2.md#iequalsready)

#### Constructors

##### Constructor

```ts
new ImageSource(
   storageId?, 
   url?, 
   sourcePageIndex?, 
   actualSize?, 
   saveAspectRatio?, 
   origin?): ImageSource;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `storageId?` | `string` | `undefined` |
| `url?` | `string` | `undefined` |
| `sourcePageIndex?` | `number` | `0` |
| `actualSize?` | `boolean` | `false` |
| `saveAspectRatio?` | `boolean` | `true` |
| `origin?` | [`Origin`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ImageItem.ImageItem.Namespace.ImageSource.md#origin) | `undefined` |

###### Returns

[`ImageSource`](#imagesource)

#### Accessors

##### actualSize

###### Get Signature

```ts
get actualSize(): boolean;
```

###### Returns

`boolean`

###### Set Signature

```ts
set actualSize(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `boolean` |

###### Returns

`void`

##### containsOnlyVectorElements

###### Get Signature

```ts
get containsOnlyVectorElements(): boolean;
```

###### Returns

`boolean`

###### Set Signature

```ts
set containsOnlyVectorElements(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `boolean` |

###### Returns

`void`

##### dpiX

###### Get Signature

```ts
get dpiX(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set dpiX(dpi): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `dpi` | `number` |

###### Returns

`void`

##### dpiY

###### Get Signature

```ts
get dpiY(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set dpiY(dpi): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `dpi` | `number` |

###### Returns

`void`

##### height

###### Get Signature

```ts
get height(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set height(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

##### id

###### Get Signature

```ts
get id(): string;
```

###### Returns

`string`

###### Set Signature

```ts
set id(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `string` |

###### Returns

`void`

##### isVector

###### Get Signature

```ts
get isVector(): boolean;
```

###### Returns

`boolean`

###### Set Signature

```ts
set isVector(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `boolean` |

###### Returns

`void`

##### origin

###### Get Signature

```ts
get origin(): Origin;
```

###### Returns

[`Origin`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ImageItem.ImageItem.Namespace.ImageSource.md#origin)

##### pageIndex

###### Get Signature

```ts
get pageIndex(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set pageIndex(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

##### saveAspectRatio

###### Get Signature

```ts
get saveAspectRatio(): boolean;
```

###### Returns

`boolean`

###### Set Signature

```ts
set saveAspectRatio(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `boolean` |

###### Returns

`void`

##### type

###### Get Signature

```ts
get type(): ImageSourceType;
```

###### Returns

[`ImageSourceType`](#imagesourcetype)

##### url

###### Get Signature

```ts
get url(): string;
```

###### Returns

`string`

###### Set Signature

```ts
set url(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `string` |

###### Returns

`void`

##### width

###### Get Signature

```ts
get width(): number;
```

###### Returns

`number`

###### Set Signature

```ts
set width(value): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

`void`

#### Methods

##### addPropertyChanged()

```ts
addPropertyChanged(listener): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | (`sender`, `eventArgs`) => `void` |

###### Returns

`void`

###### Implementation of

[`INotifyPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#inotifypropertychanged).[`addPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#addpropertychanged)

##### clone()

```ts
clone(): ImageSource;
```

###### Returns

[`ImageSource`](#imagesource)

##### equals()

```ts
equals(other): boolean;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `other` | [`ImageSource`](#imagesource) |

###### Returns

`boolean`

###### Implementation of

[`IEqualsReady`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Utils-2.md#iequalsready).[`equals`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/Utils-2.md#equals)

##### removePropertyChanged()

```ts
removePropertyChanged(listener): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | (`sender`, `eventArgs`) => `void` |

###### Returns

`void`

###### Implementation of

[`INotifyPropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#inotifypropertychanged).[`removePropertyChanged`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/INotifyPropertyChanged.md#removepropertychanged)

##### setIdWithOrigin()

```ts
setIdWithOrigin(id, origin): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `id` | `string` |
| `origin` | [`Origin`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ImageItem.ImageItem.Namespace.ImageSource.md#origin) |

###### Returns

`void`

##### toJSON()

```ts
toJSON(): object;
```

###### Returns

`object`

###### actualSize

```ts
actualSize: boolean;
```

###### containsOnlyVectorElements

```ts
containsOnlyVectorElements: boolean;
```

###### height

```ts
height: number;
```

###### id

```ts
id: string;
```

###### isVector

```ts
isVector: boolean;
```

###### origin

```ts
origin: Origin;
```

###### pageIndex

```ts
pageIndex: number;
```

###### saveAspectRatio

```ts
saveAspectRatio: boolean;
```

###### url

```ts
url: string;
```

###### width

```ts
width: number;
```