Installing Dynamic Image

3 minutes to read

Prerequisites

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

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 or higher.
Both Microsoft Visual C++ Redistributable Package x86 (latest supported) and Microsoft Visual C++ Redistributable Package x64 (latest supported).

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:

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.
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.
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.
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.
Similarly to the previous step, set up the Modify permissions for the D:\inetpub\dynamic-image\Results folder.
In AppSettings.config, 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:

Run LicenseManager.exe and click Register License Key.
Copy your activation code, navigate to your Customers Canvas account, and click Get license key.
Submit your actication code and go back to the License Manager.
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.

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.

<!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.