В моем случае у меня есть цветовая кодировка некоторых плиток в HTML-клиенте, и я хочу добавить простой ключ цветового кода. У меня есть файл PNG, который я хочу использовать.
Мне не требуется возможность загрузки или изменения изображения.
Эта ссылка, кажется, достигает того, что я ищу, но я не уверен, где это реализовать. Входит ли весь этот код в PostRender элемента управления изображением, который я создал?
Добавить изображение в выключатель света, используя локальное свойство и местоположение файла
Вот что представляет собой 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;
}
);
};
}
В настоящее время элемент управления «Изображение» отображается на экране в браузере и имеет пользовательский размер, который я выбираю, но это просто голубая область, в которой не отображается мой файл изображения.
Я не уверен, что вставил изображение? Я не уверен, что это пропущенный шаг?
Спасибо!!
