การเพิ่มภาพนิ่งลงในหน้าจอเรียกดู Lightswitch HTML 2013

วิธีที่ง่ายที่สุดในการทดสอบแนวทางนี้คือเปลี่ยน 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 ตามโพสต์ต้นฉบับของฉัน และตัวควบคุมรูปภาพบนหน้าจอของคุณชื่อ ColorKey

ในตัวอย่างข้างต้น ฉันยังได้ใช้โอกาสในการลดความซับซ้อนและปรับปรุงโค้ดจากโพสต์ต้นฉบับของฉันให้ง่ายขึ้นเล็กน้อย นอกจากนี้ยังมีตัวจัดการข้อผิดพลาดแบบง่ายซึ่งอาจติดธงหากมีปัญหาในการโหลดภาพ

หากยังไม่ได้ผล คุณสามารถทดสอบกระบวนการได้โดยเปลี่ยนชื่อไฟล์ต้นฉบับของรูปภาพเป็น content/images/user-splash-screen.png (ไฟล์ PNG นี้ควรได้รับการเพิ่มตามหลักสูตรเมื่อคุณสร้างไฟล์ โครงการ LightSwitch HTML)

เนื่องจากฟังก์ชัน GetImageProperty เป็นรูทีนตัวช่วย แทนที่จะฝังมันไว้ใน postRender โดยปกติแล้วคุณจะวางไว้ภายในโมดูลตัวช่วย JavaScript ซึ่งจะทำให้สามารถนำกลับมาใช้ใหม่ได้อย่างง่ายดายโดยไม่ต้องทำซ้ำโค้ดของฟังก์ชัน หากคุณยังไม่มีไลบรารีดังกล่าวและสนใจที่จะนำไปใช้ โพสต์ต่อไปนี้จะกล่าวถึงรายละเอียดบางส่วนที่เกี่ยวข้องกับการดำเนินการนี้:

ไฟล์ JS โกลบอล Lightswitch HTML เพื่อส่งผ่านตัวแปร