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

Typical Proofing Workflow

Applies to: Customer's Canvas On-Premises; Preflight Tool · Archived documentation

The workflow of Customer's Canvas Proofing Tool runs through the following steps:

  1. The design upload
  2. The preflight check
  3. Rendering

The Design Upload

To start working with the preflight tool, upload design files through the /api/upload HTTP request. This method gets user files, saves them with new unique names on your server, and returns these server-side names within a response.

URL toolurl/api/upload
Type POST
Content-Type multipart/form-data
Request data Design files
Response The array of uploaded file names as they are stored on the server.

Here, toolurl is the path to your Visual Proofing Tool instance. You can pass the design files through a standard HTML form.

HTML 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="/Resources/VisualProofingTool/VisualProofingTool.js">
    </script>
</head>

<body>
    <form id="inputForm" name="inputForm" method="post" enctype="multipart/form-data" action="/api/upload">
    <div>
        <input name="theDesign" type="file" />
    </div>
    <div>
        <input type="submit" value="Submit" />
    </div>
    </form>

    <script type="text/javascript">
    var form = document.getElementById("inputForm");
    form.addEventListener("submit", function(e) {
        var xhr = new XMLHttpRequest();
            xhr.open("POST", form.getAttribute("action"));
            xhr.send(new FormData(form));
            xhr.onreadystatechange = function() {
                if (xhr.readyState !== 4 || xhr.status !== 200)
                    return;

                var designFiles = JSON.parse(xhr.responseText);
            }
    }
    </script>
</body>
</html>

The Quality Meter

When users manipulate their designs, Visual Proofing Tool validates resolution of print designs. If the resulting image size is less than the DPI parameter requires, then the following warning appears at the bottom of the editor: "Image resolution is too low for the print size!"

Also, you can retrieve the size and resolution of the uploaded design file via the /api/imageinfo request.

URL toolurl/api/imageinfo/filename
Type GET
Response The image size in pixels and DPI resolution for the specified file.

Here, filename is the file name returned by the /api/upload method. toolurl is the path to your Visual Proofing Tool instance. The response is a JSON object containing the following properties.

JSON 
{
    width: number;
    height: number;
    dpi: number;
}

Rendering the Design

When the user has finished manipulating the design, they can render to hi-res through the finish method.

JavaScript 
finish(): Promise<{proofUrls: string[], hiResUrl: string}>

This method returns links to both proof images and the hi-resolution output. You can display the proof images on the stage where the user validates the result.

Name Data type Description
proofUrls array of strings An array of links to proof images.
hiResUrl string The URL of the hi-res output.

You can retrieve these links the following way.

JavaScript 
CustomersCanvas.VisualProofing.Tool.init(...)
.then(function(tool){
    tool.finish()
        .then(function (finishData) {
            console.log(finishData.hiResUrl);
            console.log(finishData.proofUrls);
        })
        .catch(function(exception) {
            console.error(exception);
        });
});

See Also

Manual