IE瀏覽器複製彈出窗口中的畫布DOM例外：TYPE_MISMATCH_ERR（17）

我不知道是否有解決此IE9問題的辦法，我遇到了，但這是我想要做的。我的頁面上有一張畫布。我想將此畫布圖像複製到另一個畫布，但是在我創建的彈出式窗口中。我在這個實驗中遇到的是我可以將畫布圖像複製到另一個動態創建的畫布上，沒有問題。但是，當我嘗試在彈出窗口中執行此操作時，IE給我一個DOM異常：TYPE_MISMATCH_ERR（17）。不幸的是，這似乎是一個IE瀏覽器的事情，因爲我在Chrome中運行相同的代碼，並且它工作... 所以這裏是我的代碼。您需要提供自己的圖像，但我使用了一個簡單的640x480 jpeg文件。你還需要打開控制檯，因爲我在做一個console.error。我也試過這段代碼作爲一個文件，並從本地IIS上的本地主機運行。IE瀏覽器複製彈出窗口中的畫布DOM例外：TYPE_MISMATCH_ERR（17）

<!DOCTYPE html> 
<html> 
<head> 
    <title>Canvas Copy Test</title> 
    <style> 
     #mainSrc { 
      border:1px solid red; 
     } 
     #dest01 { 
      width:640px; 
      height:480px; 
      border:1px solid blue; 
     } 
    </style> 
    <script> 
     var destWin; // Destination Window 

     window.onload=function() 
     {   
      var testImg = new Image(); 
      testImg.src = "me.jpg"; 
      testImg.onload = function() 
      { 
       var mainCanvas = document.getElementById("mainSrc"); 
       var mainCtx = mainCanvas.getContext("2d"); 
       mainCtx.drawImage(testImg,0,0); 
      } 
      var copyBtn = document.getElementById("copyBtn"); 
      var copyWinBtn = document.getElementById("copy2WinBtn"); 
      copyBtn.addEventListener("click",copyImage,false); 
      copyWinBtn.addEventListener("click",copy2Win,false); 
     } 

     // Copy Canvas Image to Another on the same page. 
     function copyImage() 
     { 
      var mainCanvas = document.getElementById("mainSrc"); 
      var destCanvas = document.createElement("canvas"); 
      var destDiv = document.getElementById("dest01"); 
      destCanvas.width = mainCanvas.width; 
      destCanvas.height = mainCanvas.height; 
      var dCtx = destCanvas.getContext("2d"); 
      dCtx.drawImage(mainCanvas,0,0); 
      destDiv.appendChild(destCanvas); 
     } 

     // Copy Canvas to Popup Window 
     function copy2Win() 
     { 
      var mainCanvas = document.getElementById("mainSrc"); 

      try {   
       destWin = window.open("","destWin"); 
       var destWinDoc = destWin.document; 
       var destWinHTML = "<!DOCTYPE html><html><head><title>POPUP</title><body><div id='destWinDiv' style='width:640px; height:480px; border:1px solid red'></div></body></html>"; 
       destWinDoc.write(destWinHTML); 

       var destCanvas = destWinDoc.createElement("canvas"); 
       var destDiv = destWinDoc.getElementById("destWinDiv"); 
       destCanvas.width = mainCanvas.width; 
       destCanvas.height = mainCanvas.height; 
       var dCtx = destCanvas.getContext("2d"); 
       dCtx.drawImage(mainCanvas,0,0); 
       destDiv.appendChild(destCanvas); 
      } 
      catch (err) 
      { 
       console.error(err); 
      } 
     } 

    </script> 
</head> 
<body> 
    <canvas id="mainSrc" width="640" height="480"></canvas> 
    <p> 
     <input type="button" name="Copy" value="Copy" id="copyBtn" /> 
     &nbsp; 
     <input type="button" name="Copy2Win" value="Copy To New Window" id="copy2WinBtn" /> 
    </p> 
    <div id="dest01"></div> 
</body> 
</html>

來源

2012-10-11 dchin

在寫入之前，您是否嘗試過調用'destWinDoc.open（）'？ – jbabey

@jbabey不確定你的意思。我嘗試在我的dCtx.drawImage在copy2Win函數之前放置一個destWinDoc.open，並且我得到了拒絕的權限... – dchin

好了，周圍多一點玩耍後，我想通了，該標籤實際上可以採取從畫布toDataURL（base64編碼的圖像），並顯示它...所以我能夠做此修改在我上面的copy2Win功能是這樣的：

function copy2Win() 
    { 
     var mainCanvas = document.getElementById("mainSrc"); 
     destWin = window.open("","destWin"); 
     var destWinDoc = destWin.document; 
     var destWinHTML = "<!DOCTYPE html><html><head><title>POPUP</title><body><div id='destWin' style='width:640px; height:480px; border:1px solid red'><img src='" + mainCanvas.toDataURL() + "' alt='Copy!' /></div></body></html>"; 
     destWinDoc.write(destWinHTML);   
    }

的一點要注意的是，我寫出來的img標籤的src是canvas.toDataURL（），這一點也適用。 IE不會抱怨這一點。儘管數據不在另一個畫布中，但我能夠獲得所需的數據，這是我的圖像數據從畫布中拉出並顯示在新窗口中。有趣的是，如果您查看生成的源代碼，圖像實際上顯示爲src中的base64編碼數據，因此瀏覽器似乎正在解碼src數據以供顯示;有趣。

來源

2012-10-16 14:55:42 dchin

IE瀏覽器複製彈出窗口中的畫布DOM例外：TYPE_MISMATCH_ERR（17）

回答

相關問題