使用本地属性和文件位置将图像添加到lightswitch [英] Add image to lightswitch using local property and file location

问题描述

一个简单的问题，是否可以在lightswitch的屏幕上显示静态图像?

just a quick question, is it possible to display a static image within a screen on lightswitch?

我要单击添加数据项"->选择本地属性"，然后键入图像".现在与以前的版本不同，我无法选择文件路径，因此我需要通过post-Render部分编写一些js，我在这里键入什么?

I want to click "Add Data Item" -> select "Local Property" and Type "Image". Now unlike previous versions i cannot select a file path so i need to write some js via the post-Render section, what do i type in here?

感谢您给我的任何帮助，尝试了几种方法，但均未成功.

Thanks for any help you an give me, tried a few methods with no success.

推荐答案

最近解决了一个类似的情况，我们实现了以下辅助承诺操作功能:-

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

已添加本地属性(添加数据项->本地属性->类型:图像->名称:ImageProperty")并将其放入内容项树中，可以在_postRender例程中以以下方式执行promise操作: -

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

上面的调用还演示了，除了显示LightSwitch项目本地的图像外，还可以将imageSource设置为外部url(前提是外部站点使用适当的服务器端ACAO标头来允许跨域访问)

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).

我已更新此帮助程序功能，以对这篇文章的回答进行稍微改善.向Lightswitch HTML 2013浏览屏幕添加静态图像.

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

这篇关于使用本地属性和文件位置将图像添加到lightswitch的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！