Configuring High Resolution and Proof Images

As described in the Integration with E-commerce Overview topic, the next step after a user is done customizing a product is to have the user approve the resulting product and render the hi-res output. In order to approve the result, proof images are usually displayed to the user.

The rendering section of the ~\Configuration\clientConfig.json configuration file is designed to configure hi-res output and proof images. By default, this section looks as follows:

JavaScript
"rendering": {
    "hiResOutputToSeparateFiles": false,
    "hiResOutputFileFormat": "pdf",
    "hiResOutputCompression": "zip",
    "hiResOutputJpegCompressionQuality": 90,
    "hiResOutputDpi": 300,
    "hiResOutputColorSpace": "rgb",
    "hiResOutputFlipMode": "none",
    "proofImageFileFormat": "png",
    "proofImageWatermarkEnabled": true,
    "proofImageWatermarkFontPostScriptName": "ArialMT",
    "proofImageWatermarkFontSize": 35,
    "proofImageWatermarkText": "watermark",
    "proofImageCropSafetyLine": "bleed",
    "proofImageFlipMode": "none",
    "proofImageMockupEnabled": true
},

Below in this topic, we describe in detail all the parameters from the rendering section. Also, we dwell on some additional settings, which are set up outside of the rendering section, but relate to hi-res output and proof images.

Any rendering configuration parameter can also be set up via the IConfiguration interface.

Configuring Proof Images

For proof images, you can set their file format, specify whether to crop them to safety lines, add a text watermark, and set up a preview mockup. The size of proof images is 500 x 500 pixels by default; you can change it using getProofImages or finishProductDesign like it is described in the Handling Product Customization topic. The resolution of proof images is 72 DPI and cannot be changed.

Name Description Default value Possible values
proofImageFileFormat type of the print-ready file "PNG" "JPEG", "PNG"

Watermarks

You can add a text watermark with the specified text, font, and font size. The watermark is gray and positioned at the center of the proof image; its position and color cannot be changed. All other settings can be configured:

Name Description Default value Possible values
proofImageWatermarkEnabled enabling watermark false true, false
proofImageWatermarkFontPostScriptName watermark font name "ArialMT" string containing PostScript font name
proofImageWatermarkFontSize watermark font size in pixels 35 integer
proofImageWatermarkText text of the watermark "watermark" string

Mockups

You can enable or disable mockups for proof images:

Name Description Default value Possible values
proofImageMockupEnabled enabling mockups true true, false

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 hi-res outputs. For example, the following code initializes the product with the envelopeLabel.psd design template and the underlying envelope.png mockup image:

JavaScript
productDefinition = {
    surfaces: [{
        printAreas: [{ designFile: "envelopeLabel" }],
        mockup: { down: { mockupFile: "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:

JavaScript
productDefinition = {
    surfaces: [{
        printAreas: [{ designFile: "envelopeLabel" }],
        mockup: {
            down: {
                mockupFile: "envelope", 
                previewMockupFiles: ["coolEnvelope"] 
            }
        }
    }]
};

Cropping to 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 line, you can configure Customer's Canvas to crop the proof images to the bleed line. To perform this, specify the name of the line as the value of the proofImageCropSafetyLine configuration parameter in ~\Configuration\clientConfig.json, or via the IConfiguration interface like it is shown below:

JavaScript
configuration = { rendering: {proofImageCropSafetyLine: "bleed"} };
productDefinition = {
    defaultSafetyLines: [{
        name: "bleed",
        margin: 8.5,
        color: "rgba(0,255,0,255)",
        altColor: "rgba(255,255,255,0)",
        stepPx: 5,
        widthPx: 1
    }],
    surfaces: [ ... ]
};

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

Flipping Proof Images

You can flip proof images vertically, horizontally, or in both directions:

Name Description Default value Possible values
proofImageFlipMode flip mode for proof images "none" "none", "vertical", "horizontal", "both"

There are two ways to set up a flip mode for your product. To set it for all products by default, you should change ~\Configuration\clientConfig.json or use the IConfiguration interface for a specific product/page like it is shown below:

JavaScript
configuration = {
    rendering: {
        "proofImageFlipMode": "horizontal"
    }
};

In order to flip only one specific surface, use ISurfaceDefinition:

JavaScript
productDefinition = {
    surfaces: [
            { proofImage: { flipMode: "both" } }
    ]
}

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

Configuring Hi-res Output

For hi-res output, you can set their DPI, file format, image compression parameters, and color space. Color management is always enabled, and you can also specify color profiles for the hi-res output.

Name Description Default value Possible values
hiResOutputDpi image resolution in dots per inch (DPI) 300 an integer
hiResOutputColorSpace color space of hi-res output "RGB" "CMYK", "RGB", "Grayscale"
hiResOutputFileFormat type of hi-res output "PDF" "PDF", "JPEG", "PNG", "TIFF"
hiResOutputCompression type of hi-res output compression; "jpeg" and "zip" are supported for PDF files only, whereas "lzw" is supported for TIFF files "zip" "jpeg", "zip", "none", "lzw"
hiResOutputJpegCompressionQuality JPEG compression quality in percent; this parameter makes sense only for JPEG and PDF formats. 90 integer from 0 to 100.
hiResOutputToSeparateFiles if true, then hi-res output for each side of a multipage product will be put in a separate file false boolean

The color space and the file type of the hi-res output can also be specified through IFrame API using the IConfiguration interface. For example, the following snippet configures the system to render a product in CMYK PDF files:

JavaScript
configuration = { 
    rendering: {
        hiResOutputColorSpace: "CMYK",
        hiResOutputFileFormat: "PDF",
        hiResOutputDpi: 300
    } 
};

Setting Color Profile

Colors on the design may not match colors on the hi-res output, especially if you are using the CMYK format. This happens due to various factors, such as the device-dependency of image color formats, inks, paper color, etc., that affect output colors. To negate this effect, there is a special technique called color management, and Customer's Canvas supports it.

A system that implements the color management must be able to obtain the color characteristics from so-called color profiles, which uniquely define the color characteristics of the pixels. Customer's Canvas requires two types of profiles: a source and a destination. The destination is the profile for your hi-res output. The source is the profile for any graphics loaded into the editor. Different graphics objects may have different profiles. For example, if you load an image into the editor, it may have its own embedded color profile.

Color profiles for each output color space (grayscale, RGB, and CMYK) can be set in web.config, using the RgbColorProfileFileName, CmykColorProfileFileName, GrayscaleColorProfileFileName parameters, as follows:

XML
<configuration>

    <configSections>
        <section name="Aurigma.GraphicsMill.AjaxControls.VectorObjects" 
        type="System.Configuration.NameValueSectionHandler, System, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
...
    </configSections>
...
    <Aurigma.GraphicsMill.AjaxControls.VectorObjects>
        <add key="GrayscaleColorProfileFileName" value="~/grayscaleColorProfile.icc" />
        <add key="RgbColorProfileFileName" value="~/rgbColorProfile.icc" />
        <add key="CmykColorProfileFileName" value="~/cmykColorProfile.icc" />
    </Aurigma.GraphicsMill.AjaxControls.VectorObjects>

</configuration>

By default, profiles specified with these three settings are used as destinations depending on the color space passed in the hiResOutputColorSpace parameter. For example, if you render the products to a CMYK hi-res output, the profile configured in CmykColorProfileFileName will be picked as the destination profile.

With source profiles, the rule is simple. If a graphics object has its own embedded profile, it will be used as the source profile. If it does not have an embedded color profile, one of three profiles configured in web.config will be used as the source profile depending on the color space of the graphics objects. The profile configured in RgbColorProfileFileName will be picked for RGB objects, CmykColorProfileFileName for CMYK objects, and GrayscaleColorProfileFileName for grayscale ones.

If the color profiles are not configured in web.config or configured files are missing, they are set with default values:

  • SWOP (Coated) 20%, GCR, Medium profile for CMYK
  • sRGB IEC61966-2.1 profile for RGB
  • Dot Gain 30% profile for Grayscale

Flipping Hi-res Files

We have already seen how to flip proof images above; this feature is supported for hi-res outputs as well:

Name Description Default value Possible values
hiResOutputFlipMode flip mode for hi-res outputs "none" "none", "vertical", "horizontal", "both"

The same way as for proof images, in order to set it globally for any product, you should change ~\Configuration\clientConfig.json:

JavaScript
configuration = {
    rendering: {
        "hiResOutputFlipMode": "horizontal"
    }
};

To flip only one surface, use IPrintAreaDefinition:

JavaScript
productDefinition = {
    surfaces: [
            { printAreas: [{ designFile: "BusinessCard2_side1", hiResOutput: { flipMode: "both" } }] }
    ]
}

See Also

Manual

IFrame API Reference