View as Markdown
You’re viewing outdated documentation. View the latest Customer’s Canvas On-Premises documentation.

Getting Started

Applies to: Customer's Canvas On-Premises; Dynamic Image 0.x (may differ) · Archived documentation

The Dynamic Image represents a web service that allows for generating images dynamically from PSD files, where you can replace and modify layers, by using HTTP requests.

The Distribution Package

You can contact our support team to get the Dynamic Image. This distribution package represents the DynamicImage_<version-number>.zip file and contains the following folders:

  • DI-<version-number> - the compiled application.
  • LicenseManager - a utility to register Customer's Canvas.
  • readme.md - instructions to get started.

Deploying the Dynamic Image

To deploy this application:

  • Unzip the archive to a new IIS folder.
  • In IIS Manager, create an application pool with the NetworkService identity.
  • Create an Application (if you want to put it to a folder of your main site) or Add a website to the Sites list associated with this folder (if you want to deploy the service on a separate domain).
  • Set up the AppPool that you have created for this application/site.
Note

A user account, under which the Dynamic Image runs in IIS, must have Read and Write permissions to the App_Data and Logs folders.

For detailed instructions, you can refer to the topic about Deploying Applications to Windows Servers.

Application Settings

In AppSettings.config, you can specify custom folders for the cache, assets, resulting images, and other settings or leave the default values.

AppSettings.config 
<!-- API security key. -->
<add key="ApiSecurityKey" value="" />

<!-- Paths to the resources. -->
<add key="FontPath" value="..\Assets\fonts" />
<add key="ImagePath" value="..\Assets\images" />
<add key="TemplatePath" value="..\Assets\templates" />

<!-- Paths to the resulting hires files. -->
<add key="ResultHiresPath" value="..\Results\Pdf" />
<!-- Paths to the resulting preview files. -->
<add key="ResultPreviewPath" value="..\Results\Images" />

<!-- If `true`, it stores rendering results directly in the file system as .pdf and .png files.
     If this value is `false`, then the files are stored in the internal format,
        and you can limit the size and expiration time for both storages of the resulting files. -->
<add key="SaveResultsToFileSystem" value="true" />

<!-- The expiration time for resulting hires files, in seconds. For example, 864000 is 10 days. -->
<add key="ResultHiresExpirationTimespan" value="0" />
<!-- The maximum size of the resulting hires files, in bytes. For example, 4294967296 is 4 GiB. -->
<add key="ResultHiresMaxSize" value="0" />

<!-- The expiration time for resulting preview files, in seconds. For example, 864000 is 10 days. -->
<add key="ResultPreviewExpirationTimespan" value="0" />
<!-- The maximum size of the resulting preview files, in bytes. For example, 4294967296 is 4 GiB. -->
<add key="ResultPreviewMaxSize" value="0" />

<!-- Paths to the cache. -->
<add key="CachePath" value=".\App_Data\Cache\FileCache" />
<add key="FontCachePath" value=".\App_Data\Cache\FontCache" />

<!-- Enables the cache. If true, it caches every render request. -->
<add key="EnableCache" value="true" />
<!-- Cache expiration time, in seconds. By default, it's 10 days. -->
<add key="CacheExpirationTimespan" value="864000" />
<!-- The maximum size of the cache, in bytes. By default, it's 4 GiB. -->
<add key="CacheMaxSize" value="4294967296" />

<!-- The resize interpolation mode for preview images. -->
<add key="PreviewResizeInterpolationMode" value="Anisotropic9" />
<!-- Allows for uploading images in the `ImagePath` folder through the Web API. -->
<add key="AllowUploadImages" value="true" />

<!-- The maximum number of tasks for rendering proof images and hi-res outputs that the Dynamic Image can perform at the same time. -->
<add key="MaxConcurrentRenderingTasks" value="12" />
<!-- Preloads external images before the rendering. If `true`, it could speed up the rendering. -->
<add key="PreloadImages" value="false" />
<!-- An experimental optimization that speeds up the rendering of preview images, but may blur them. Use with caution. -->
<add key="OptimizePreview" value="false" />

<!-- Debugging and logging. -->
<add key="EnableSwagger" value="false" />
<add key="LogAllRequests" value="false" />
<add key="EnableDebugLogs" value="false" />

If you set EnableSwagger to true, then you can navigate to <your-site-url>/swagger and explore the interactive Web API in your browser.

Registering a License Key

To start working with the Dynamic Image, you need a license key - either an evaluation or production key. To obtain a license, you can use the License Manager:

Running the Dynamic Image

Let us assume that your Dynamic Image instance shares a domain name with the main website and is located in the /DI-0.6.5/ virtual folder, and a badge.psd template is in the folder with templates. To personalize this template, open the following sample in your browser.

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

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

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

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

    (async() => {
        const response = await fetch("http://localhost/DI-0.6.5/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);
        else if (response.status === 500)
            // Exception details.
            console.log(result.details);
    })()
});
    </script>
</head>
<body>
    <h3>The Dynamic Image Sample</h3>
</body>
</html>

When the page is loaded, it will display a link to a preview image in the browser console.

If you face any problem with the Dynamic Image, please contact our support team.

See Also

Manual