캔버스의 이미지로드가 Internet Explorer 9 및 오페라에서 실패 함

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
     <script src="resources/js/jquery-1.7.2.min.js"> </script> 
     ... 
     ... 
     <script> 
      ... 
      ... 
      function draw(screen, data) { 
       if (screen.document.getElementById("screen") == null){ 
        screen.document.write('<div id="screen" style="width:' + 
        data.maxX + '; height:' + data.maxY + '; margin: auto;" >' + 
        '<canvas id="screenCanvas" width=' + data.maxX + ' height=' + 
        data.maxY + 'style="border:2px solid #000000;color:#000000;" > </canvas></div>'); 
       } 
       var canvas = screen.document.getElementById('screenCanvas'); 
       var context = canvas.getContext('2d'); 
       var tileY = 0; 
       var tileX = 0; 
       var counter = 0; 
       var tileWidth = data.tileWidth; 
       var tileHeight = data.tileHeight; 
       for (var i=0;i<(data.maxX/data.tileWidth);i++){ 
        for (var j=0;j<(data.maxY/data.tileHeight);j++){ 
         var img = new Image(); 
         img.onload = (function(img, tileX, tileY, tileWidth, tileHeight){ 
          return function() { 
           context.drawImage(img,tileX, tileY, tileWidth, tileHeight); 
          } 
         })(img, tileX, tileY, tileWidth, tileHeight); 
         img.src = "http://myserver:8080/images/screen/tile/" + 
            data.tiles[counter].imageId; 
         tileX = tileX + parseInt(data.tileWidth); 
         counter ++; 
        } 
        tileY = tileY + parseInt(data.tileHeight); 
        tileX = 0; 
       } 
      } 
      ... 
      ... 
     </script> 
    </head> 
    <body> 
     ... 
     ... 
     ... 
     ... 
    </body> 
</html>

새 창에서 캔버스를 그리려면 새 창을 열 때이 함수를 호출합니다. 이미지 배열이 포함되어 있습니다.캔버스의 이미지로드가 Internet Explorer 9 및 오페라에서 실패 함

문제 :

1 인터넷 익스플로러 9 : 캔버스를 그릴하지만 (내가 캔버스의 스타일에서 설정 한 경계가 나타납니다 이후)는 이미지를 그릴하지 않았다.

2 IE는 이미지를이 오류를 얻을려고

SCRIPT5022: Exception thrown and not caught 
index.html, line 1 character 1

3 오페라 12을 나타납니다이 캔버스를 표시하지 않았다.

참고 :

1이 기능은 파이어 폭스, 구글 크롬, 사파리와 함께 잘 작동합니다.

2 인터넷 익스플로러는 호환성보기 (F12)가 아니고 Quirks 모드 (표준)가 아닌 것이 확실합니다.

어떤 도움이 필요합니까?

출처

2012-06-23 Georgian Citizen

좋은 프레젠테이션. –

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
     <script src="resources/js/jquery-1.7.2.min.js"> </script> 
     ... 
     ... 
     <script> 
      ... 
      ... 
      function draw(screen, data) { 
       var canvas; 
       if (screen.document.getElementById("screen") == null){ 
        var canvasDiv = screen.document.createElement("div"); 
        canvasDiv.id = "screen"; 
        canvasDiv.style.margin = "0px auto"; 
        canvasDiv.style.width = data.maxX; 
        canvasDiv.style.height = data.maxY; 
        canvasDiv.style.border='2px solid black'; 
        screen.document.body.appendChild(canvasDiv); 

        canvas = screen.document.createElement('canvas'); 
        canvas.setAttribute('width', data.maxX); 
        canvas.setAttribute('height', data.maxY); 
        canvas.setAttribute('id', 'screenCanvas'); 
        canvasDiv.appendChild(canvas); 
        if(typeof G_vmlCanvasManager != 'undefined') { 
         canvas = G_vmlCanvasManager.initElement(canvas); 
        } 
       }else{ 
        canvas = screen.document.getElementById('screenCanvas'); 
       } 

       var context = canvas.getContext('2d'); 
       var tileY = 0; 
       var tileX = 0; 
       var counter = 0; 
       var tileWidth = data.tileWidth; 
       var tileHeight = data.tileHeight; 
       for (var i=0;i<(data.maxX/data.tileWidth);i++){ 
        for (var j=0;j<(data.maxY/data.tileHeight);j++){ 
         var img = new Image(); 
         img.onload = (function(img, tileX, tileY, tileWidth, tileHeight){ 
          return function() { 
           context.drawImage(img,tileX, tileY, tileWidth, tileHeight); 
          } 
         })(img, tileX, tileY, tileWidth, tileHeight); 
         img.src = "http://myserver:8080/images/screen/tile/" + 
            data.tiles[counter].imageId; 
         tileX = tileX + parseInt(data.tileWidth); 
         counter ++; 
        } 
        tileY = tileY + parseInt(data.tileHeight); 
        tileX = 0; 
       } 
      } 
      ... 
      ... 
     </script> 
    </head> 
    <body> 
     ... 
     ... 
     ... 
     ... 
    </body> 
</html>

참조 : 우리는 우리의 마크 업, IE는 우리에게 오류의 메인 요리를 제공한다고 사용 된 경우 IE 이후www.williammalone.com

캔버스 태그가 무엇을 의미하는지 알고하지 않습니다. 대신 JavaScript로 캔버스 요소를 만듭니다. 그것은 새 페이지를 만들 것이며, IE는 이미지의 온로드 핸들러를 완료하지 않으므로

희망이 도움 당신은

출처

2012-06-23 08:57:56

IE9는'

당신은 페이지로드 후 draw 함수를 호출하는 경우, 당신은합니다 (document.write(...)를 교체해야합니다 크롬과 달리 적어도 크롬).

$("body").append('<div id="screen" style="width:' + 
        data.maxX + 'px; height:' + data.maxY + 'px; margin: auto;" >' + 
        '<canvas id="screenCanvas" width=' + data.maxX + ' height=' + 
        data.maxY + style="border:2px solid #000000;color:#000000;"></canvas</div>')

출처

2012-06-23 09:06:29 Andreas

을 어떻게 지원합니까? $ ("body"). append (....); 새 창에서 (위에서 언급 한 것처럼 화면이라는 새 창 안에 캔버스를 추가하고 싶습니다)? –

IE9 지원 캔버스, 그건 사실이지만, 나는 똑같은 문제에 직면했다. 그리고 나는 내 대답으로 해결했다. –

흠 .. 재미 있습니다. 나는이 스택에 태그를 붙이는 것과 비슷한 문제가 있다고 생각한다.

내 페이지가로드 된 후 이미 만든 캔버스 요소에 이미지 (.png)를로드하는 함수가 호출됩니다. IE에서 절반의 시간이 이미지가로드되지 않습니다. 나는 새로 고침을해야하고 결국 나타납니다. firefox & 크롬에서는 첫 번째 시도에서 작동합니다. 때로는 IE에서 첫 번째 시도에서 작동하지만,이 부정은 나를 죽이고 있습니다 ....

function loadCanvas(dataURL) { 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    X_max = parseInt($("#container").css('width')); 
    Y_max = parseInt($("#container").css('height')); 

    canvas.width = X_max; 
    canvas.height = Y_max; 

    ctx.fillStyle="white"; 
    ctx.fillRect(0, 0, X_max, Y_max); 


    // load image from data url 
    var imageObj = new Image; 

    imageObj.onload = function() { 
    ctx.drawImage(this, 0, 0); 
    }; 

    imageObj.src = dataURL; 
}

출처

2013-03-03 13:50:44 Matt

이것을 알아 냈습니까? 나는 IE9에서 매우 유사한 것을 얻고있다. drawImage에 도착합니까? –

Nope - havent는 그것을 알아 냈다. IE does not는 캔버스를 좋아하는 것처럼 보입니다. 제 대안 중 하나는 배경 이미지로 png를로드하고 'IE 사용자'라는 사용자에게 '페인팅 없음'이라고 말합니다. drawimage에 도착하면 확실하지 않습니다. ok -> 문서가로드 될 때 함수가 호출되지만로드되는 이미지는 종종 수백 KB입니다.그리고 '문서'가로드가 완료되기 전에 다른 요청 (예 : 동기화 루프가 있음)으로 인해 중단되면 캔버스 요청이 중단됩니다. 좀 더 탐험 해봐야 겠어. 여기에 빠른 도움이 필요해. – Matt

캔버스의 이미지로드가 Internet Explorer 9 및 오페라에서 실패 함

답변

관련 문제