添加静态图像到Lightswitch HTML 2013浏览屏幕 [英] Adding static image to Lightswitch HTML 2013 Browse Screen
问题描述
在我的情况中，我在HTML客户端中对某些图块进行了颜色编码，并且我想添加一个简单的颜色代码密钥。我有我想要使用的PNG文件。
我不需要上传或更改图片的功能。
这个链接似乎达到了我所期待的目标，但我不确定在哪里实施。是否所有这些代码都进入了我创建的图像控件的PostRender？
这里是我作为Image Local Property创建的简单Image数据项的PostRender，然后拖入解决方案设计器中。它基本上是从上面的链接复制的，但是我确实更改了图像文件的名称以与我的相匹配，并且我已经将该项添加到Content \ \\ \\ Image文件夹结构中，并且它显示在文件视图中：
myapp.BrowseOrderLines.ColorKey_postRender = function（element，contentItem）{
//在此处编写代码。
函数GetImageProperty（operation）{
var image = new Image（）;
var canvas = document.createElement（canvas）;
var ctx = canvas.getContext（2d）;
// XMLHttpRequest用于允许使用画布处理外部跨域资源。
//与crossOrigin =Anonymous不同，XMLHttpRequest在IE10中工作（对LightSwitch很重要）
//仍然需要相应的服务器端ACAO头（请参阅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）{
//在此处编写代码。
msls.promiseOperation
（
$ .proxy（
GetImageProperty，
{imageSource：content / images / Key.png}
）
）.then（
function（result）{
contentItem.screen.ImageProperty = result;
}
）;
};
}
目前，Image控件在浏览器的屏幕上显示，并且是我选择的自定义尺寸，但它只是一个淡蓝色区域，不显示我的图像文件。
我是不知道我是否嵌入了图像？我不确定这是否是一个缺失的步骤？
谢谢!!
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以允许使用画布处理外部跨域资源
//与crossOrigin =Anonymous不同，XMLHttpRequest在IE10中工作（对于LightSwitch很重要）
//仍然需要合适的服务器端A CAO标题（见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）;
}）;
};
这里假设您按照我的原始文章和屏幕上的Image控件命名了本地属性ImageProperty被命名为ColorKey。
在上面的例子中，我也借此机会略微简化和改进了我的原文。它还包括一个简单的错误处理程序，如果加载图像时出现问题，它可能会标记出来。
如果这仍然不起作用，您可以测试过程将图像源文件名更改为content / images / user-splash-screen.png（当您创建LightSwitch HTML项目时，该PNG文件应该已经添加了）。
由于GetImageProperty函数是一个辅助函数，而不是将其嵌入到postRender中，所以通常将它放在JavaScript辅助模块中。这将允许它轻松重复使用而不必重复该函数的代码。如果你还没有这样一个图书馆，并且你有兴趣实施一个图书馆，那么下面的文章将介绍一些涉及这样做的细节：
In my case, I have color coded some tiles in the HTML client and I want to add a simple color code key. I have the PNG file I want to use.
I do not require the ability to upload or change the image.
This link seems to achieve what I am looking for, but I am not sure where to implement. Does all of this code go into the PostRender of the Image Control I created?
Add image to lightswitch using local property and file location
Here is what the PostRender of the simple Image data item I created as an Image Local Property, and then dragged into the Solution Designer. It was basically copied from the link above, but I did change the name of the image file to match mine, and I have already added the item to the Content\Images folder structure and it shows in the file view:
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;
}
);
};
}
Currently, the Image control does show on the screen in the browser, and is the custom size I choose, but it is just a light blue area that does not display my image file.
I am not sure if I have embedded the image? I am not sure if that is a missing step?
Thank you!!
The easiest method of testing this approach would be to change your postRender to the following (which embeds the helper function within the postRender function):
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);
});
};
This assumes that you named the local property ImageProperty as per my original post and the Image control on your screen is named ColorKey.
In the above example, I've also taken the opportunity to slightly simplify and improve the code from my original post. It also includes a simple error handler which may flag up if there is a problem with loading the image.
If this still doesn't work, you could test the process by changing the image source file-name to content/images/user-splash-screen.png (this png file should have been added as a matter of course when you created your LightSwitch HTML project).
As the GetImageProperty function is a helper routine, rather than embedding it within the postRender you'd normally place it within a JavaScript helper module. This will allow it to be easily reused without repeating the function's code. If you don't already have such a library and you're interested in implementing one, the following post covers some of details involved in doing this:
Lightswitch HTML global JS file to pass variable
这篇关于添加静态图像到Lightswitch HTML 2013浏览屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
