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

Question

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

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

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

Add image to lightswitch using local property and file location

下面是我创建的简单Image数据项的PostRender作为Image Local属性，然后拖入Solution Designer。它基本上是从上面的 link 复制的，但我确实更改了图像文件的名称以匹配我的名称，并且我已经将该项目添加到 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;
        }
    );
};

}

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

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

谢谢！！

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);
    });
};

假设您按照我原来的 post 命名本地属性 ImageProperty，并且屏幕上的图像控件命名为 ColorKey。

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

如果还是不行，你可以把图片来源file-name改成content/images/user-splash-screen.png（这个png文件理所当然应该添加进去的时候）您创建了 LightSwitch HTML 项目）。

由于 GetImageProperty 函数是一个辅助例程，与其将其嵌入 postRender，您通常会将其放置在 JavaScript 辅助模块中。这将使它可以很容易地重用而无需重复函数的代码。如果您还没有这样的库并且有兴趣实现一个，以下 post 涵盖了执行此操作所涉及的一些细节：

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

Adding static image to Lightswitch HTML 2013 Browse Screen

html

image

visual-studio

visual-studio-lightswitch