New online demos available.  

StaticImage

Using this widget you an display a single image by specifying an URL in its params.

General info

  • type - static-image

Params

  • url - a URL to the image to display. It can be a static URL, output from Customer's Canvas or Ajax widget.
  • timestamp - a boolean value which specifies whether to automatically add a time stamp to an image every time you set the URL. It may help if it loads an image from the browser cache every time.

Examples

Displaying a static image

{
    "name": "image",
    "type": "static-image",
    "params": {
        "url": "http://www.example.com/my-image.jpg"
    }
}

Displaying the result of PsdWebService

In combination with the Ajax widget, it can be used to update the image dynamically, based on the option values.

For example, assume that you want to use PsdWebService and pass a text color to the layer called Text.

{
    "widgets": [
        {
            "name": "color-option",
            "type": "option",
            "params": {
                // ... color option params
            }
        }
        {
            "name": "img-request",
            "type": "ajax",
            "params": {
                "url": "http://example.com/psd/api/preview",
                "lock": "preview",
                "method": "POST",
                "request": {
                    "template": "designs/my-design1.psd",
                    "format": "png",
                    "data": {
                        "Text": {
                            "type": "text",
                            "color": "{{$['color-option']._.color}}"
                        }
                    }
                }
            }
        },
        {
            "name": "preview",
            "type": "static-image",
            "params": {
                "url": "{{$['img-request'].response}}"
            }
        }
    ]
}

Using StaticImage with Customer's Canvas Web API

Customer's Canvas includes not just an editor, but also a Web API to personalize designs on a server. It can be used along with this widget as well.

Unlike PsdWebService, Customer's Canvas Web API returns more complicated JSON structure as a result. The output may look like this:

[{
    "ProofImageUrls":[["https://example.com/api/rendering/GetProofImage/default/408693E1872EC277EA28E90E481B2F72/0_0.png"],
                      ["https://example.com/api/rendering/GetProofImage/default/408693E1872EC277EA28E90E481B2F72/1_0.png"]],
    "StateId":"408693E1872EC277EA28E90E481B2F72",
    "HiResUrls": ["https://example.com/api/rendering/GetHiResOutput/default/408693E1872EC277EA28E90E481B2F72/-1_-1.pdf"]
},
{
    "ProofImageUrls":[["https://example.com/api/rendering/GetProofImage/default/4C042925C4A39E45F886D67B0DE5B4E5/0_0.png"],
                     ["https://example.com/api/rendering/GetProofImage/default/4C042925C4A39E45F886D67B0DE5B4E5/1_0.png"],
                     ["https://example.com/api/rendering/GetProofImage/default/4C042925C4A39E45F886D67B0DE5B4E5/2_0.png"]],
    "StateId":"4C042925C4A39E45F886D67B0DE5B4E5",
    "HiResUrls":["https://example.com/api/rendering/GetHiResOutput/default/4C042925C4A39E45F886D67B0DE5B4E5/-1_-1.pdf"]
}]

However, even this kind of output is not a problem - you can handle all these nested multidimensional arrays without problems.

{
    "widgets": [
        {
            "name": "color-option",
            "type": "option",
            "params": {
                // ... color option params
            }
        }
        {
            "name": "img-request",
            "type": "ajax",
            "params": {
                "url": "http://example.com/cc/api/Preview/GeneratePreview",
                "lock": "preview",
                "method": "POST",
                "headers": {
                    "X-CustomersCanvasAPIKey": "your-api-key"
                },
                "request": {
                    "productDefinitions": [{
                        "surface": ["design_1"]
                    }],
                    "userId": "1234",
                    "itemsData": {
                        "Text": {
                            "color": "{{$['color-option']._.color}}"
                        }
                    }
                }
            }
        },
        {
            "name": "preview",
            "type": "static-image",
            "params": {
                "url": "{{$['img-request'].response[0].ProofImageUrls[0][0]}}"
            }
        }
    ]
}