IE 팝업창의 캔버스 DOM 예외 : TYPE_MISMATCH_ERR (17)

내가 만난이 IE9 문제에 대한 해결 방법이 있는지는 잘 모르겠지만 여기에 내가하려고하는 것이있다. 내 페이지의 캔버스에 이미지가 있습니다. 이 캔버스 이미지를 다른 캔버스로 복사하고 싶지만 팝업 창에서 만듭니다. 이 실험에서 나는 캔버스 이미지를 동일한 페이지에 다른 동적으로 생성 된 캔버스에 복사 할 수 있다는 점을 알아 냈습니다. 하지만 팝업 창에서 시도 할 때 IE는 DOM 예외 : TYPE_MISMATCH_ERR (17)을 제공합니다. 안타깝게도 Chrome에서 동일한 코드를 실행했기 때문에 이것은 IE의 것 같습니다. 내 코드는 여기에 있습니다. 자신의 이미지를 제공해야하지만, 간단한 640x480 jpeg 파일을 사용했습니다. 내가 console.error를하고 있기 때문에 콘솔도 열려 있어야합니다. 또한이 코드를 로컬 IIS의 localhost에서 파일로 실행하려고했습니다.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 무슨 뜻인지 모르겠다. copy2Win 함수에서 내 dCtx.drawImage 전에 destWinDoc.open을 넣으려고했는데 사용 권한이 거부되었습니다 ... – dchin

음, 좀 더 주위에 재생 후, 나는 태그가 실제로 그래서이 수정을 할 수 있었다 ... 캔버스 toDataURL (에서 base64로 인코딩 된 이미지에 걸릴) 및 표시 할 수 있다고 생각

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);   
    }

것은 내가 canvas.toDataURL을()로 img 태그의 SRC을 쓰고있다주의하는 것이,이 작품 : 내 위의 copy2Win 기능이있을 수 있습니다. IE는 이에 대해 불평하지 않습니다. 데이터가 다른 캔버스에 들어 있지는 않지만 필자가 필요로하는 것을 얻을 수 있습니다. 이는 내 캔버스에서 가져온 이미지 데이터를 새 창에 표시합니다. 흥미롭게도 생성 된 소스 코드를 보면 이미지가 실제로 src에 base64로 인코딩 된 데이터로 표시되므로 브라우저가 표시 할 src 데이터를 디코딩하는 것 같습니다. 재미있는.

출처

2012-10-16 14:55:42 dchin

IE 팝업창의 캔버스 DOM 예외 : TYPE_MISMATCH_ERR (17)

답변

관련 문제