ctx.drawImage在另一個窗口的畫布上

Question

我有一個在畫布上繪制的主窗口，需要將圖形鏡像到包含另一個相同畫布的輔助窗口。 請注意，這必須與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）;上出現錯誤？

這是windows的屏幕截圖：

Answer 1

經過幾天無用的嘗試，終於找到了一個簡單的解決方案。 意識到由於某種原因我無法在IE11中輔助窗口上的畫布上使用drawImage之后，我嘗試（如我在主帖子中所寫的）用圖像替換輔助窗口的畫布，然后更新帶有此代碼的圖像：

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

不幸的是，在繪制的每個像素處重復使用.toDataURL方法會導致嚴重的滯后問題。 解決方案是使用帶有10毫秒參數的setTimeout函數來更新輔助窗口的圖片 ：

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

refresh();

因此，我不必每隔10ms刷新一次繪制的每個像素，就不必刷新輔助窗口上的圖像，這消除了嚴重的滯后問題，並提供了不錯的同步結果。