종횡비 이미지의 크기에 따른 excanvas 오류

아래 코드는 화면 비율에 따라 전체 화면 이미지를 만듭니다. 하지만 그것은 excanvas와 함께 작동하지 않습니다. 나는 문제를 해결할 수 없다. 어떤 도움? http://jsfiddle.net/salt/Zs6uV/종횡비 이미지의 크기에 따른 excanvas 오류

솔루션 : http://jsfiddle.net/salt/xpwZh/

<!DOCTYPE html> 
    <html> 
     <head> 
     <meta charset="utf-8" /> 
     <title>aspectratio test</title> 
<script type="text/javascript"> 
     function getWindowSize(typ) { 
     var myWidth = 0, myHeight = 0; 
     if(typeof(window.innerWidth) == 'number') { 
      //Non-IE 
      myWidth = window.innerWidth; 
      myHeight = window.innerHeight; 
     } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 
      //IE 6+ in 'standards compliant mode' 
      myWidth = document.documentElement.clientWidth; 
      myHeight = document.documentElement.clientHeight; 
     } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) { 
      //IE 4 compatible 
      myWidth = document.body.clientWidth; 
      myHeight = document.body.clientHeight; 
     } 
     if(typ=="width"){ 
      return myWidth; 
     }else{ 
      return myHeight; 
     }; 
    }; 
</script> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]--> 
    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
     </head> 
     <body style="margin:0px;" onLoad="setupBackground();"> 
     <canvas id="myCanvas" style="position:absolute;left: 0px; top: 0px; z-index: 1;"></canvas> 
    <script type="text/javascript"> 
    function setupBackground() { 
     canvas = document.getElementById('myCanvas'); 
     if (typeof window.G_vmlCanvasManager!="undefined") { 
      canvas=window.G_vmlCanvasManager.initElement(canvas); 
      var ctx = canvas.getContext('2d'); 
     }else{ 
      var ctx = canvas.getContext('2d'); 
     }; 
     function draw() { 
      canvas.width = 0; 
      canvas.height = 0; 

      var divWidth = getWindowSize("width"); 
      var divHeight = getWindowSize("height"); 

      var yScale = divHeight/img.height; 
      var xScale = divWidth/img.width; 

      var newImgHeight = img.height * xScale; 
      var newImgWidth = divWidth; 

      if (divHeight >= newImgHeight) { 
       newImgHeight = divHeight; 
       newImgWidth = img.width * yScale; 
      }; 

      canvas.width = divWidth; 
      canvas.height = divHeight; 

     var diffX =(Math.max(newImgWidth,divWidth)-Math.min(newImgWidth,divWidth))/2; 
     var diffY =(Math.max(newImgHeight,divHeight)-Math.min(newImgHeight,divHeight))/2; 
     var imgX=0-diffX; 
     var imgY=0-diffY; 
      ctx.drawImage(img,imgX,imgY,newImgWidth,newImgHeight); 
     }; 

     var img = new Image(); 
     img.onload = function() { 
      $(window).bind('resize', function() { 
      draw(); 
     }); 
      draw(); 
     }; 
     img.src ='http://userserve-ak.last.fm/serve/_/460496/Popperklopper.jpg'; 
    }; 
    </script> 
    </body> 
    </html>

출처

2012-03-02 Salt Hareket

의 문제 확실하지만,이 작업을 수행 할 때되지 않음 :

<!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]--> 
    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

가 있어야한다 :

여기

는 jsfiddle 링크입니다

<!--[if IE]--><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><!--[endif]--> 
     <!--[if lt IE 9]--><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><!--[endif]-->

IE 버전에서 작동하지 않도록 스크립트를 문서화하여 보관하십시오. 문제가 해결되기를 바랍니다.

출처

2012-05-20 13:51:14

종횡비 이미지의 크기에 따른 excanvas 오류

답변

관련 문제