以下是一个桌面捕获的JSON示例：
{
"status": 1,
"desktopWidth": 1280,
"desktopHeight": 800,
"cursor": "default",
"cursorX": 241,
"cursorY": 525,
"windows": [
{
"hwnd": "196724",
"zidx": 1,
"desktop": "Default",
"left": 0,
"top": 0,
"width": 1280,
"height": 800
},
// 更多窗口信息...
{
"hwnd": "131186",
"zidx": 8,
"desktop": "Default",
"left": 0,
"top": 760,
"width": 54,
"height": 40,
"imgs": [
{
"x": 0,
"y": 0,
"w": 54,
"h": 40,
"img": "data:image/jpeg;base64,/9j/4AAQSkZJ..."
}
]
}
]
}
"windows"数组包含了桌面上所有可见的窗口。每个项目包含窗口句柄（用于识别目的）、其边界矩形、所属的桌面、相对的z顺序以及一个图像数组。每个图像对应于特定窗口上的更改区域。如果没有更改，"imgs"数组不存在。
函数reload()用于重新加载屏幕捕获信息：
function reload() {
scale = getScale();
var url = baseUrl + "json?id=" + sessionStatus.id;
clearTimeout(jsonTimeout);
jsonTimeout = setTimeout(onJsonTimeout, jsonTimeoutValue);
$.getJSON(url, function(obj) {
try {
$.each(obj.windows, function(i, win) {
processWindow(win);
});
for (var i = deskDiv.children.length - 1; i >= 0; i--) {
var found = false;
var canvas = deskDiv.children[i];
$.each(obj.windows, function(i, win) {
var canvasid = "canvas" + win.hwnd;
if (canvas.id == canvasid) {
found = true;
}
});
if (!found) {
canvas.style.display = "none";
canvas.innerHTML = '';
deskDiv.removeChild(canvas);
}
}
} catch (err) {
if (sessionStatus.active) {
setTimeout(reload, 1);
}
}
});
}
对于收到的每个"window"项，都会调用processWindow方法，创建或重用一个canvas元素。所有不属于此JSON的canvas元素对应的窗口已经关闭。这些在循环中被擦除。
ProcessWindows函数为每个窗口创建或重用一个canvas，使用hwnd作为其id的一部分。它还根据接收到的信息设置canvas坐标和zindex，并遍历图像数组，将它们复制到canvas表面上。
function createCanvas(win) {
var canvas = document.createElement("canvas");
canvas.visibility = 'visible';
canvas.display = 'block';
canvas.style.position = 'absolute';
canvas.style.left = (win.left - sessionStatus.viewLeft) + 'px';
canvas.style.top = (win.top - sessionStatus.viewTop) + 'px';
canvas.style.zIndex = win.zidx;
canvas.width = deskDiv.offsetWidth;
canvas.height = deskDiv.offsetHeight;
canvas.id = "canvas" + win.hwnd;
deskDiv.appendChild(canvas);
return canvas;
}
function processWindow(win) {
var canvasid = "canvas" + win.hwnd;
var canvas = document.getElementById(canvasid);
if (!canvas) {
canvas = createCanvas(win);
}
deskDiv.style.marginLeft = getDeltaX() + 'px';
deskDiv.style.marginTop = getDeltaY() + 'px';
if ((win.width == 0) || (win.height == 0)) {
canvas.style.visibility = 'hidden';
canvas.style.zIndex = -1;
} else {
canvas.style.left = (win.left - sessionStatus.viewLeft) + 'px';
canvas.style.top = (win.top - sessionStatus.viewTop) + 'px';
canvas.style.clip = 'rect(0px,' + win.width + 'px,' + win.height + 'px,0px)';
canvas.style.visibility = 'visible';
canvas.style.zIndex = win.zidx;
}
if (win.imgs != null) {
var context = canvas.getContext('2d');
if (!context || !context.drawImage) {
alert("no hay canvas");
return;
};
$.each(win.imgs, function(i, imgpart) {
var img = new Image();
img.id = "imgcanvas";
img.style.display = 'none';
img.onload = function() {
context.drawImage(img, imgpart.x, imgpart.y, imgpart.width, imgpart.height);
}
img.src = imgpart.img;
})
}
};