---
title: "Proof images | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/rendering/proof-images/"
---

# Proof images

> After a user finishes customizing a product, they approve the resulting product first. To approve the result, the Design Editor displays proof images to the user.

## Rendering parameters

The `rendering` section of the **clientConfig.json** configuration file contains parameters for both print files and proof images. This topic dwells on the parameters of proof images. For details about configuring print files, refer to the [Print Files](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/rendering/print-files.md) topic.

<pre className="language-json"><code>{`{
    "rendering": {
        "`}<a href="#proofImageFileFormat" title="The type of proof image files.">proofImageFileFormat</a>{`": "jpeg",
        "`}<a href="#proofImageRgbColorProfileName" title="The name of an RGB color profile.">proofImageRgbColorProfileName</a>{`": "",
        "`}<a href="#proofImageCropSafetyLine" title="The name of a safety line which proof images are cropped to.">proofImageCropSafetyLine</a>{`": "",
        "`}<a href="#proofImageSafetyLinesEnabled" title="Allows for drawing safety lines on proof images.">proofImageSafetyLinesEnabled</a>{`": true,
        "`}<a href="#proofImageSpineAndFoldingLinesEnabled" title="Displays spines and folding lines on proof images.">proofImageSpineAndFoldingLinesEnabled</a>{`": true,
        "`}<a href="#proofImageFlipMode" title="The flip mode for proof images.">proofImageFlipMode</a>{`": "none",
        "`}<a href="#proofImageMockupEnabled" title="Displays mockups on proof images.">proofImageMockupEnabled</a>{`": true,
        "`}<a href="#proofImageShowStubContent" title="Enables the stub images and text hints in unfilled placeholders.">proofImageShowStubContent</a>{`": false,
        "`}<a href="#proofImageInterpolationMode" title="An interpolation algorithm used for resizing proof images.">proofImageInterpolationMode</a>{`": null,
        "`}<a href="#proofImageRotateMode" title="Renders proof images rotated.">proofImageRotateMode</a>{`": "none",
        "`}<a href="#proofImageInStringPlaceholderHintsEnabled" title="Enables hints for unfilled in-string placeholders.">proofImageInStringPlaceholderHintsEnabled</a>{`": false,
        "`}<a href="#proofImageUsePrintAreasAsClippingMasks" title="Enables print area clipping masks on proof images.">proofImageUsePrintAreasAsClippingMasks</a>{`": false
    }
}`}</code></pre>

Any rendering configuration parameter can also be set up via the [IRenderingProperty](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IRenderingProperty.md) interface.

The Design Editor allows you to render three types of proof images: a page thumbnail, a real-size page preview, and a product preview as a multi-page PDF. For the first two types, you can set either JPG or PNG file format. You can also specify whether to crop proof images to safety lines, add watermarks, and set up a preview mockup. By default, the size of page thumbnails is 500 x 500 pixels; you can change it using the parameters of [getProofImages](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/Editor.Editor.md#getproofimages) or [finishProductDesign](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/Editor.Editor.md#finishproductdesign).

You can specify the file format and page orientation, and enable stubs of image and text placeholders by using the following properties:

Name | Description | Default value | Possible values

proofImageFileFormat | the type of the preview file | <code>"jpeg"</code> | <code>"jpeg"</code>, <code>"png"</code>

proofImageRgbColorProfileName | the name of an RGB color profile | <code>"sRGB IEC61966-2.1"</code> | string

proofImageShowStubContent | enables the stub images and text hints in unfilled placeholders | <code>false</code> | <code>true</code>, <code>false</code>

proofImageInStringPlaceholderHintsEnabled | enables hints for unfilled in-string placeholders on proof images. | <code>false</code> | <code>true</code>, <code>false</code>

## Watermarks

You can add both text and graphic watermarks to proof images by using the [IWatermarkConfig](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IWatermarkConfig.md) interface. To enable them on proof images, set the `visibility.proof` property to `true`.

```js
let configuration = {
    watermark: {
        text: {
            text: "watermark",
            fontSettings: {
                postScriptName: "ArialMT",
                size: 14,
                fauxBold: false,
                fauxItalic: false
            },
            opacity: 0.5
        },
        visibility: {
            proof: true
        }
    }
};
```

Fore more details, refer to the [Watermarks](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/rendering/watermarks.md) topic.

## Mockups

You can enable or disable mockups for proof images.

Name | Description | Default value | Possible values

proofImageMockupEnabled | enables mockups | <code>true</code> | <code>true</code>, <code>false</code>

If you set `proofImageMockupEnabled` to `false`, then only print areas are rendered to proof images.

Mockups help visualize print products and they are not rendered into print files. For example, the following code initializes the product with the **envelopeLabel.psd** design template and the underlying **envelope.png** mockup image.

```js title="Defining background mockups"
let productDefinition = {
    surfaces: [{
        printAreas: [{ designFile: "envelopeLabel" }],
        mockup: { down: "envelope" }
    }]
};
```

If a mockup is configured in the editor, then, by default, the same mockup is displayed on proof images. In our example, the proof image contains the envelope mockup if you do not specifically set up a different one for previews.

Using different mockups in the editor and for proof images can be useful. For example, if you want to give the user a better idea of what the real product will look like, you can create a proof image with a photographic picture of the product. However, a simpler version of the mockup can be used in the editor to allow the user to focus on the design instead of being distracted by a mockup with too many details.

To set a preview mockup or several preview mockups, do as follows:

```js title="Defining background preview mockups"
let productDefinition = {
    surfaces: [{
        printAreas: [{ designFile: "envelopeLabel" }],
        mockup: { down: "envelope" },
        previewMockups: [{ down: "coolEnvelope" }]
    }]
};
```

For more details, refer to the [Mockups](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/product-definition/mockups.md) topic.

## Safety lines

There are products, like business cards, that are cut after printing. You can set one of the product's safety lines to represent the bleed line to which the product will be cut. If it is not enough to just display the bleed line, you can crop proof images to this line.

Name | Description | Default value | Possible values

proofImageCropSafetyLine | the name of the safety line to which the proof image is clipped. | <code>""</code> | string

proofImageSafetyLinesEnabled | enables safety lines | <code>true</code> | <code>true</code>, <code>false</code>

proofImageSpineAndFoldingLinesEnabled | enables spines and folding lines | <code>true</code> | <code>true</code>, <code>false</code>

To crop proof images to a safety line instead of displaying this line, specify its name as the value of the proofImageCropSafetyLine configuration parameter in **clientConfig.json** or via the [IConfiguration]/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IRenderingProperty) interface.

```js title="Defining Safety Lines"
let configuration = {
    rendering: {
        proofImageCropSafetyLine: "bleed"
    }
};

let productDefinition = {
    surfaces: [{
        designFile: "calendar", 
        safetyLines: [{
            name: "bleed",
            margin: 8.5,
            color: "rgba(0,0,255,1)",
            altColor: "rgba(255,255,255,0)",
            pdfBox: "Trim"
        }]
    }]
};
```

If there is no safety line with the given name, proof images are not cropped.

To specify that hi-res outputs should be clipped to safety lines, you can set a PDF page box in the [pdfBox](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/rendering/print-files.md#pdf-page-boxes) property.

## Clipping print areas

You can control whether the print area acts as a clipping mask using the `proofImageUsePrintAreasAsClippingMasks` property.

| Value | Behavior |
|-------|----------|
| `true` | Content is clipped to the print area bounds. Items extending beyond the print area are not visible in the proof image. |
| `false` (default) | Content is rendered completely, even if it extends beyond the print area bounds. This maintains backward compatibility with existing implementations. |

:::note
For **hi-res outputs**, the print area is **always** used as a clipping mask, regardless of the `UsePrintAreasAsClippingMasks` setting. This property only affects **proof images**.
:::

To enable clipping for proof images:

```json
{
    "rendering": {
        "proofImageFileFormat": "jpeg",
        "proofImageUsePrintAreasAsClippingMasks": true
    }
}
```

## Manipulating proof images

Name | Description | Default value | Possible values

proofImageFlipMode | the flip mode for proof images | <code>"none"</code> | <code>"none"</code>, <code>"vertical"</code>, <code>"horizontal"</code>, <code>"both"</code>

proofImageInterpolationMode | an interpolation algorithm used for resizing; for the complete list of supported algorithms, refer to the Aurigma Graphics Mill library. | <code>""</code> | string

proofImageRotateMode | rotates proof images clockwise to a predefined angle; if "auto", rotates proof images at the same angle as the canvas. | <code>"none"</code> | <code>"none"</code>, <code>"auto"</code>, <code>"rotate90"</code>, <code>"rotate180"</code>, <code>"rotate270"</code>

You can flip proof images vertically, horizontally, or in both directions. There are two ways to set up a flip mode for your product. To set it for all products by default, you should change **clientConfig.json** or use the [IConfiguration](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IRenderingProperty.md) interface for a specific product/page as the following example shows.

```js title="Defining a flip mode"
let configuration = {
    rendering: {
        proofImageFlipMode: "horizontal"
    }
};
```

In order to flip only one specific surface, use [`ISurfaceDefinition`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.ISurfaceDefinition.md).

```js title="Defining a flip mode for a page"
let productDefinition = {
    surfaces: [
        { proofImage: { flipMode: "both" } }
    ]
}
```

Technically, flip mode is set for designs only, so neither mockups nor watermarks are flipped.