---
title: "Installing Dynamic Image | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/dynamic-image/installing-app/"
---

# Installing Dynamic Image

> If you are installing this application to a clean Windows Server, make sure you have installed the following components:

## Prerequisites

- IIS installed with ASP.NET 4.5 or higher (server roles _.NET Extensibility 4.5_ and _ASP.NET 4.5_).
- [Microsoft .NET Framework 4.8](https://dotnet.microsoft.com/en-us/download/dotnet-framework/thank-you/net48-web-installer) or higher.
- Both [Microsoft Visual C++ Redistributable Package x86 (latest supported)](https://aka.ms/vs/17/release/vc_redist.x86.exe) and [Microsoft Visual C++ Redistributable Package x64 (latest supported)](https://aka.ms/vs/17/release/vc_redist.x64.exe).

## Distribution Package

The distribution package represents the `DynamicImage_<version-number>.zip` file and contains the following folders:

- **assets** - fonts, designs, and other graphics.
- **Results** - a folder for resulting print files.
- **DI-\<version-number>** - the Dynamic Image application.
- **LicenseManager** - a tool to manage licenses.

## How to Deploy the Dynamic Image

To deploy this application:

1.  In the File Explorer, navigate to the web root directory (for example, **D:\\inetpub**), create a new site's folder under it, for example, **dynamic-image**, and unzip the content of **DynamicImage_\<version-number>.zip** to this folder.
2.  In the IIS manager, create a new site:

    - Right-click **Sites** and then click **Add Website**.
    - Enter the **Site name** (`DynamicImage`) and its **Physical path** (`D:\inetpub\dynamic-image`)
    - Click **OK**.

3.  Find **DynamicImage** in the list of **Application Pools**, right-click this pool, click **Basic Settings**, select **.Net CLR Version v4**, set the **Integrated** pipeline mode, and click **OK**.
4.  Set up permissions for the **D:\\inetpub\\dynamic-image\\DI-\<version-number>\\App_Data** folder:

    - In the File Explorer, browse to **D:\\inetpub\\dynamic-image\\DI-\<version-number>**, right-click **App_Data**, and click **Properties**. On the **General** tab, uncheck **Read-only**, then click **Apply**.
    - On the **Security** tab, click **Edit**, then click **Add**. Type in `IIS AppPool\DynamicImage`, click **Check Names**, and after it finds the account (the account's name should become underlined: DynamicImage), click **OK**.
    - Select the **Modify** permission and click **OK** two more times.

5.  Similarly to the previous step, set up the **Modify** permissions for the **D:\\inetpub\\dynamic-image\\Results** folder.

6. In [AppSettings.config](https://customerscanvas.com/docs/on-premises/dynamic-image/config-backend.md), configure your asset folders, the cache, and other parameters, or leave the default values.

## How to Register License Keys

To start working with Dynamic Image, you need a license key. To obtain a license, use the License Manager. You can find this tool and its manual in the `LicenseManager` folder.

To register a license key:

1. Run **LicenseManager.exe** and click **Register License Key**.
2. Copy your activation code, navigate to your [Customers Canvas account](https://customerscanvas.com/account/licenses), and click **Get license key**.
3. Submit your actication code and go back to the License Manager.
4. Paste your key, press **Proceed**, and verify the license type and maintenance period.

*Note: If you prefer using the **Aurigma.GraphicsMill.lic** file, copy this file to the `\bin\` folder.*

For details about license types and license keys, you can refer to the [corresponding topic](https://customerscanvas.com/docs/on-premises/design-editor/it-ops/install/license-keys.md).

## Running the Dynamic Image

Let us assume that your Dynamic Image shares a domain name with the main website and is located in the `/DI/` virtual folder, and your have a `badge.psd` template which is in the templates folder.

In this sample, we define new image (the **Photo** layer), text (the **Name** layer), and background color (the **Background** layer) for the source template and render a proof image.

``` html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>The Dynamic Image Sample</title>

<script language="javascript">
document.addEventListener("DOMContentLoaded", async function() {

    var cfg = {
        "Photo": {
            "type": "image",
            "image": "https://placekitten.com/500/500",
            "resizeMode": "fill"
        },
        "Name": {
            "type": "text",
            "text": "John Wood"
        },
        "Background": {
            "type": "shape",
            "color": "#eeeb00"
        }
    };

    var data = {
        template: "badge.psd",
        data: cfg,
        format: "png"
    };

    const response = await fetch("https://example.com/DI/api/rendering/preview", {
        method: "POST",
        headers: { "Content-Type": "application/json; charset=utf-8" },
        body: JSON.stringify(data)
    });

    const result = await response.json();
    if (response.status === 200) {
        // A link to the personalized copy.
        console.log("Personalized image: " + result);
        console.log(result);

        // An Image element displaying the preview.
        var proofDiv = document.getElementById('proofs');
        proofDiv.innerHTML = "";
        var element = document.createElement("img");
        // The resulting link.
        element.src = result;
        element.style.width = "400px";
        proofDiv.appendChild(element);
    }
    else if (response.status === 500)
        // Exception details.
        console.log(result.details);
});
</script>
</head>

<body>
    <h3>The Dynamic Image Sample</h3>
    <div id="proofs"></div>
</body>
</html>
```

When the page is loaded, it will display the proof image, and the link to this image in the browser console.