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

# ProductPreviewService

> [`ProductPreviewService`](#productpreviewservice)

## Classes

### ProductPreviewService

#### Constructors

##### Constructor

```ts
new ProductPreviewService(
   productContext, 
   designAtomsApiClient, 
   colorPreviewService, 
   service, 
   viewerConfigurationContext, 
   colorParser): ProductPreviewService;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `productContext` | [`IProductContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IProductContext.md#iproductcontext) |
| `designAtomsApiClient` | [`IDesignAtomsApiClient`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IDesignAtomsApiClient.md#idesignatomsapiclient) |
| `colorPreviewService` | [`IListenableColorPreviewService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorPreviewService.md#ilistenablecolorpreviewservice) |
| `service` | [`Service`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/Service.md#service) |
| `viewerConfigurationContext` | [`IViewerConfigurationContext`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/PreviewCanvas.md#iviewerconfigurationcontext) |
| `colorParser` | [`IColorParser`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorParser.md#icolorparser) |

###### Returns

#### Methods

##### dispose()

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

###### Returns

`void`

##### getCurrentSurfacePreview()

```ts
getCurrentSurfacePreview(options?): Promise<Blob>;
```

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options?` | [`IPreviewOptions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IPreviewOptions.md#ipreviewoptions) | Preview rendering options |

###### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/finally.md#promise)\<`Blob`\>

Blob containing the preview image of the current surface

##### getSurfacePreview()

```ts
getSurfacePreview(surfaceIndex, options?): Promise<Blob>;
```

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `surfaceIndex` | `number` | Index of the surface to preview |
| `options?` | [`IPreviewOptions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IPreviewOptions.md#ipreviewoptions) | Preview rendering options |

###### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/finally.md#promise)\<`Blob`\>

Blob containing the preview image of given surface