Javascript 使用本地属性和文件位置将图像添加到lightswitch

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

我想单击“添加数据项”->选择“本地属性”并键入“图像”。现在，与以前的版本不同，我无法选择文件路径，因此我需要通过后期渲染部分编写一些js，我在这里键入什么

---

感谢您给我的任何帮助，尝试了一些方法但没有成功。

最近解决了类似情况，我们实现了以下helper promise操作功能：-

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

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

添加本地属性（添加数据项->本地属性->类型：图像->名称：图像属性）并将其放置到内容项树中后，promise操作可以通过以下方式在_postRender例程中执行：-

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

或者，可以在屏幕的已创建函数中按如下方式调用它：-

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

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头以允许跨域访问）

---

编辑：我更新了这个帮助函数，在回答这篇文章时稍微改进了一下。

谢谢你的帮助，很容易在我的应用程序中实现：）@Crezzer7只是为了让你知道，我更新了这个帮助函数，在回答这篇文章时稍微改进了一下