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

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

1 个答案: