使用本地屬性和文件位置將圖像添加到lightswitch

Question

只是一個簡單的問題，是否可以在lightswitch的屏幕上顯示靜態圖像？

我想單擊「添加數據項」 - >選擇「本地屬性」並鍵入「圖像」。現在不像以前的版本我不能選擇一個文件路徑，所以我需要通過後渲染部分寫一些js，我在這裏輸入什麼？

感謝您給我的任何幫助，嘗試了一些沒有成功的方法。

Answer 1

最近剛剛解決了類似的情況，我們已經實現了下面的幫助承諾操作功能： -

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程序中執行： -

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

或者，它可以在屏幕的創建函數如下調用： -

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報頭以允許跨 - 域訪問）。

編輯：我已經更新了這個輔助函數，以便在回答這個帖子Adding static image to Lightswitch HTML 2013 Browse Screen時略微改進它。