Add Image To Lightswitch Using Local Property And File Location

just a quick question, is it possible to display a static image within a screen on lightswitch? I want to click 'Add Data Item' -> select 'Local Property' and Type 'Image'. Now

Solution 1:

Having recently tackled a similar situation we've implemented the following helper promise operation function: -

function GetImageProperty (operation) {
    var image = new Image();
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    // XMLHttpRequest used to allow external cross-domain resources to be processed using the canvas.  
    // unlike crossOrigin = "Anonymous", XMLHttpRequest works in IE10 (important for LightSwitch) 
    // still requires the appropriate server-side ACAO header (see https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image)
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        var url = URL.createObjectURL(this.response);
        image.onload = function () {
            URL.revokeObjectURL(url);
            canvas.width = image.width;
            canvas.height = image.height;
            ctx.drawImage(image, 0, 0);
            var dataURL = canvas.toDataURL("image/png");
            operation.complete(dataURL.substring(dataURL.indexOf(",") + 1));
        };
        image.src = url;
    };
    xhr.open('GET', this.imageSource, true);
    xhr.responseType = 'blob';
    xhr.send();
};

Having added a local property (Add Data Item -> Local Property -> Type: Image -> Name: ImageProperty) and placed it into the content item tree the promise operation can be executed in the following way within the _postRender routines: -

msls.promiseOperation
(
    $.proxy(
        GetImageProperty,
        { imageSource: "content/images/user-splash-screen.png" }
    )
).then(
    function (result) { 
        contentItem.screen.ImageProperty = result; 
    }
);

Alternatively, it can be called as follows in the screen's created function: -

msls.promiseOperation
(
    $.proxy(
        GetImageProperty,
        { imageSource: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/pie.png" }
    )
).then(
    function (result) { 
        screen.ImageProperty = result; 
    }
);

The above call also demonstrates that, in addition to displaying images local to the LightSwitch project, the imageSource can be set to an external url (provided the external site uses the appropriate server-side ACAO headers to allow cross-domain access).

EDIT: I've updated this helper function to improve it slightly in answer to this post Adding static image to Lightswitch HTML 2013 Browse Screen.