将静态图像添加到 Lightswitch HTML 2013 浏览屏幕

Question

在我的例子中，我在 HTML 客户端中对一些图块进行了颜色编码，并且我想添加一个简单的颜色代码键。我有我要使用的 PNG 文件。

我不需要上传或更改图像的能力。

这个链接似乎实现了我正在寻找的东西，但我不确定在哪里实现。所有这些代码都进入我创建的图像控件的 PostRender 吗？

Add image to lightswitch using local property and file location

这是我创建的简单图像数据项的 PostRender 作为图像本地属性，然后拖到解决方案设计器中。它基本上是从上面的链接复制的，但我确实更改了图像文件的名称以匹配我的，并且我已经将该项目添加到 Content\Images 文件夹结构中，它显示在文件视图中：

myapp.BrowseOrderLines.ColorKey_postRender = function (element, contentItem) {
// Write code here.
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();
};

myapp.BrowseOrderLines.ColorKey_postRender = function (element, contentItem) {
    // Write code here.
    msls.promiseOperation
    (
        $.proxy(
            GetImageProperty,
            { imageSource: "content/images/Key.png" }
        )
    ).then(
        function (result) {
            contentItem.screen.ImageProperty = result;
        }
    );
};

}

目前，图像控件确实显示在浏览器的屏幕上，并且是我选择的自定义大小，但它只是一个浅蓝色区域，不显示我的图像文件。

我不确定我是否嵌入了图像？我不确定这是否缺少步骤？

谢谢！！

Answer 1

测试此方法的最简单方法是将您的 postRender 更改为以下内容（将辅助函数嵌入到 postRender 函数中）：

myapp.BrowseOrderLines.ColorKey_postRender = function (element, contentItem) {
    function GetImageProperty(imageSource) {
        return msls.promiseOperation(
            function (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.onerror = function () {
                        operation.error("Image load error");
                    };
                    image.src = url;
                };
                xhr.open('GET', imageSource, true);
                xhr.responseType = 'blob';
                xhr.send();
            }
        );
    };
    GetImageProperty("content/images/Key.png").then(function onComplete(result) {
        contentItem.screen.ImageProperty = result;
    }, function onError(error) {
        msls.showMessageBox(error);
    });
};

这假设您按照我的原始帖子命名了本地属性 ImageProperty，并且屏幕上的 Image 控件被命名为 ColorKey。

在上面的示例中，我还借此机会稍微简化和改进了我的original post 中的代码。它还包括一个简单的错误处理程序，如果加载图像出现问题，它可能会进行标记。

如果这仍然不起作用，您可以通过将图像源文件名更改为 content/images/user-splash-screen.png 来测试该过程（这个 png 文件应该已经添加，当您创建了 LightSwitch HTML 项目）。

由于 GetImageProperty 函数是一个辅助例程，而不是将其嵌入到 postRender 中，您通常会将其放置在 JavaScript 辅助模块中。这将允许它轻松重用，而无需重复函数的代码。如果您还没有这样的库并且您有兴趣实现一个，那么以下帖子将介绍执行此操作所涉及的一些细节：

Lightswitch HTML global JS file to pass variable