ctx.drawImage 在不同窗口的画布上答案

【问题标题】：ctx.drawImage on a canvas on a different windowctx.drawImage 在不同窗口的画布上
【发布时间】：2018-07-17 18:48:32
【问题描述】：

我有一个在画布上绘制的主窗口，我需要将绘图镜像到包含另一个相同画布的辅助窗口。请注意，这必须与 IE11 一起使用（同样的代码可以在 Firefox 上完美运行，但不幸的是我在 IE11 上需要它）。绘图必须实时复制（逐个像素）。

当我在辅助窗口上的画布上使用 drawImage 时，出现错误。这是我正在使用的代码：

    var mirrorCanvas = mirrorWindow.myCanvas;
    var mirrorCanvasCtx = mirrorCanvas.getContext('2d');
    var currentCanvas = document.getElementById('myCanvas');
    mirrorCanvasCtx.drawImage(currentCanvas, 0, 0);

错误是“SCRIPT5022：抛出异常但未捕获”，导致它的行是“mirrorCanvasCtx.drawImage(currentCanvas, 0, 0);”；如果我评论这一行，代码就可以工作。

所以我用 img 替换了画布，并设法使用以下方法复制了画布：

    var currentCanvas = document.getElementById("myCanvas");
    mirrorWindow.myImage.src = currentCanvas.toDataURL("image/png");

但是当我将此代码添加到绘图例程中时，它在主窗口上的速度非常慢。这是行不通的。

为什么在 mirrorCanvasCtx.drawImage(currentCanvas, 0, 0); 上出现错误？

这是窗口的截图：

【问题讨论】：

它们是两个独立的窗口，第一个是从您按下按钮的页面打开并使用 window.open 打开它，此窗口在加载时使用 window.open 创建辅助窗口（镜像）页面。我添加了窗口的屏幕截图。
感谢您的澄清
你的错误信息不是很有帮助......它抛出的那行代码是什么？请注意，您应该能够将画布从 window1 绘制到 window2。 IE 可能是错误的。提供一个真实的minimal reproducible example 可能对您有所帮助。
另外，您确定在运行代码时第二个窗口已加载吗？你可以在其他浏览器上测试吗？它可能比这些更有用的信息。
更新：该代码适用于 Firefox。在 IE11 上，我收到一个错误：“SCRIPT5022: 抛出异常但未捕获”，导致它的行是“mirrorCanvasCtx.drawImage(currentCanvas, 0, 0);”;如果我评论这一行，代码也适用于 IE11。（我编辑了主要评论）。

标签： javascript html image canvas copy

【解决方案1】：

经过几天无用的尝试后，我终于找到了一个简单的解决方案。在意识到由于某种原因我不能在 IE11 的辅助窗口上的画布上使用 drawImage 之后，我尝试（正如我在主帖中所写）用图像替换辅助窗口的画布，然后更新带有此代码的图像：

var currentCanvas = document.getElementById("myCanvas");
mirrorWindow.myImage.src = currentCanvas.toDataURL("image/png");

不幸的是，在绘制的每个像素处重复 .toDataURL 方法会导致严重的延迟问题。 解决方法是使用 setTimeout 函数，带 10 毫秒参数来更新辅助窗口的图片：

function refresh(){
    mirrorWindow.myImage.src = currentCanvas.toDataURL("image/png");
    setTimeout("refresh();",10)
}

refresh();

因此，我不是在每个绘制的像素上刷新辅助窗口上的图像，而是每 10 毫秒执行一次，这消除了严重的延迟问题并提供了不错的同步结果。

【讨论】：