Question

我试图将图像从桌面发送到webapp，在桌面部分我有一个按钮，屏幕截图然后将其与之前拍摄的按钮进行比较，它计算它们之间的差异，然后生成一个新的基于这种差异的位图，然后它将这个新的Bitmap发送到在画布上绘制的webapp，这一切都是使用socket.io实时发生的。

我的问题是，我们假设我在屏幕上使用Google Chrome并进行了屏幕截图，然后我打开了cmd.exe＆amp;拍摄另一个截图，假设cmd.exe大小为300 * 100，并从屏幕的一半开始，新生成的位图将包含cmd.exe屏幕截图，但屏幕的其余部分（Google Chrome的揭秘部分）将是黑色，这对我的情况是完美的，因为我想减少带宽使用，现在我想做的是，在JavaScript端获取差异位图（blob）并绘制前一个屏幕截图的差异，这将使它看起来像我转移了整个屏幕截图，如果我只是解析画布上的blob，它会在cmd.exe的中心形成一个黑屏，这是我当前的代码：

socket.on("image up", (bin) => {
    var ctx = canvas[0].getContext('2d');
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 0, 0);  
    }
    var urlCreator = window.URL || window.webkitURL;
    var binaryData = [];
    binaryData.push(bin);
    img.src = urlCreator.createObjectURL(new Blob(binaryData));
});

有什么建议吗？提前致谢

Javascript - 在画布上绘制图像的特定部分

0 个答案: