使用本地属性和文件位置将图像添加到电灯开关
Add image to lightswitch using local property and file location
只是一个快速的问题,它是可能显示一个静态图像在屏幕上的灯开关?
我想点击"添加数据项"->选择"本地属性"并键入"图像"。现在不像以前的版本,我不能选择一个文件路径,所以我需要写一些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();
};
添加了一个本地属性(添加数据项->本地属性->类型:图像->名称:ImageProperty)并将其放入内容项树中,promise操作可以在_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头来允许跨域访问)。
编辑:我已经更新了这个辅助功能,以稍微改善它在回答这篇文章添加静态图像到Lightswitch HTML 2013浏览屏幕
相关文章:
- jquery如何从计算机添加图像
- 如何从 URL 数组向文档添加图像列表
- 如何在fabric js中向多边形添加图像
- Bootstrap多选-在复选框后添加图像
- 通过纯JS添加图像
- 如何在鹅毛笔JS中添加图像
- 使用java脚本添加图像进行测验
- 如何添加可拖动的“;添加图像”;jquery中的图标
- 添加图像与点svg画布
- 是否可以添加图像作为徽标颜色框
- 如何使用fabric.js添加图像过滤器
- JavaScript-添加图像:React Native XCode
- Dropzone”;addedfile”;以程序方式添加图像时不会激发
- 在使用Jquery/Javascript单击下一个和上一个按钮时动态添加图像
- 用图像替换页面,而不是添加图像
- 如何获取动态添加图像的宽度和高度
- 如何在这个javascript中添加图像链接
- 尝试在画布中单击鼠标以添加图像
- 在剑道 UI 树视图项旁边添加图像不起作用
- 如何使用BEML或JS在全屏Brightcove智能播放器中添加图像叠加