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:
"rendering": { "hiResOutputToSeparateFiles": false, "hiResOutputFileFormat": "pdf", "hiResOutputCompression": "zip", "hiResOutputJpegCompressionQuality": 90, "hiResOutputDpi": 300, "hiResOutputColorSpace": "rgb", "hiResOutputFlipMode": "none", "hiResOutputPdfMetadata": null, "proofImageFileFormat": "png", "proofImageSafetyLinesEnabled": false, "proofImageCropSafetyLine": "bleed", "proofImageSpineAndFoldingLinesEnabled": true, "proofImageFlipMode": "none", "proofImageMockupEnabled": true, "proofImageShowStubContent": false },
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 this section, but relate to hi-res output and proof images.
Any rendering configuration parameter can also be set up via the IRenderingProperty interface.
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 Introducing the IFrame API topic. The resolution of proof images is 72 DPI and cannot be changed.
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 | type of the print-ready file |
"PNG"
|
"JPG" , "PNG"
|
proofImageShowStubContent | enabling the stub images and text hints in unfilled placeholders |
false
|
true , false
|
proofImageRotateMode | rotates proof images clockwise to render products with different orientation of pages |
"none"
|
"none" , "rotate90" , "rotate180" , "rotate270"
|
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. The following settings can be configured through IRenderingProperty.
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 |
Note, the way of configuring watermarks through these properties is out of date and will be removed in the next major release. You can use the new approach based on the IWatermarkConfig interface.
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 topic.
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.
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:
productDefinition = { surfaces: [{ printAreas: [{ designFile: "envelopeLabel" }], mockup: { down: { mockupFile: "envelope", previewMockupFiles: ["coolEnvelope"] } } }] };
For more details, refer to the Mockups topic.
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.
Name | Description | Default value | Possible values |
---|---|---|---|
proofImageCropSafetyLine | cropping to the specified safety line |
"bleed"
|
string |
proofImageSafetyLinesEnabled | enabling safety lines |
false
|
true , false
|
proofImageSpineAndFoldingLinesEnabled | enabling spines and folding lines |
true
|
true , false
|
If it is not enough to just display the safety 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 clientConfig.json
or via the IConfiguration interface.
configuration = { rendering: { proofImageCropSafetyLine: "bleed" } }; productDefinition = { surfaces: [{ designFile: "calendar", safetyLines: [{ name: "bleed", margin: 8.5, color: "rgba(0,0,255,255)", altColor: "rgba(255,255,255,0)" }] }] };
If there is no safety line with the given name, proof images are not cropped. Customer's Canvas does not show safety lines on cropped 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 clientConfig.json
or use the IConfiguration interface for a specific product/page as the following example shows.
configuration = { rendering: { proofImageFlipMode: "horizontal" } };
In order to flip only one specific surface, use ISurfaceDefinition.
productDefinition = { surfaces: [ { proofImage: { flipMode: "both" } } ] }
Technically, flip mode is set for designs only, so neither mockups nor watermarks are flipped.
Customer's Canvas generates either vector PDF files or raster JPEG/PNG/TIFF images as the high-resolution output. To avoid any problem with fonts and render products as close as possible to the designs, text is saved to PDF files as vector paths.
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
|
integer |
hiResOutputColorSpace | color space of hi-res output |
"RGB"
|
"CMYK" , "RGB" , "Grayscale"
|
hiResOutputFileFormat | type of hi-res output |
"PDF"
|
"PDF" , "JPG" , "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 , the hi-res output for each side of a multipage product will be put in a separate file |
false
|
boolean |
hiResOutputRotateMode | rotates hi-res outputs clockwise to render products with different orientation of pages |
"none"
|
"none" , "rotate90" , "rotate180" , "rotate270"
|
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.
configuration = { rendering: { hiResOutputColorSpace: "CMYK", hiResOutputFileFormat: "PDF", hiResOutputDpi: 300 } };
Note, since the PNG format was designed for transferring images on the Internet, it does not support the CMYK color space.
Customer's Canvas supports both the device-independent and device-dependent color spaces.
You can specify device-independent profiles for each output color space (grayscale, RGB, and CMYK) in web.config
, using the RgbColorProfileFileName, CmykColorProfileFileName, and GrayscaleColorProfileFileName parameters, as follows:
<configuration> ... <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, ICCBased 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.
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, then a profile configured in web.config
will be used as the source profile depending on the color space of the graphics objects. If the color profiles are not configured in web.config
or specified files are missing, then the following standard profiles are applied:
To render high resolution outputs in a device-dependent color space, set the PdfRenderDeviceProfileEnabled parameter to True.
<configuration> ... <Aurigma.GraphicsMill.AjaxControls.VectorObjects> <add key="PdfRenderDeviceProfileEnabled" value="True" /> </Aurigma.GraphicsMill.AjaxControls.VectorObjects> ... </configuration>
In this case, hi-res outputs will not contain any associated color transformation data.
You can find more details in the Color Management in Customer's Canvas topic.
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 clientConfig.json
.
configuration = { rendering: { hiResOutputFlipMode: "horizontal" } };
To flip only one surface, use IPrintAreaDefinition.
productDefinition = { surfaces: [ { printAreas: [{ designFile: "BusinessCard2_side1", hiResOutput: { flipMode: "both" } }] } ] }
If you choose the PDF type of hi-res outputs, you can specify PDF metadata.
Name | Description | Default value | Possible properties |
---|---|---|---|
hiResOutputPdfMetadata | PDF metadata of hi-res outputs |
null
|
"author" , "creator" , "keywords" ,"subject" , "title"
|
To set up metadata globally for any product, pass the following configuration to the loadEditor method or update clientConfig.json
with this configuration.
configuration = { rendering: { hiResOutputPdfMetadata: { title: "The red postcard", keywords: "red,flower,postcard" } } };
Also, you can specify PDF metadata at runtime by using the setPdfMetadata method. For such an example, refer to the Specifying Product Tags topic.