IE9畫布縮放問題。將不會保持高寬比以適應容器

Question

我似乎無法縮放由IE9中的固定容器內的圖像填充的畫布。任何人都知道工作？我記得讀有關IE如何處理畫布作爲一個塊級元素的一些其他線程

<style type="text/css"> 
#container { max-width: 25%; max-height: 25%; } 
canvas { max-width: 90%; max-height: 90%; } 
</style> 


<script type="text/javascript"> 
var img = new Image(); 
img.src = 'http://l.yimg.com/dh/ap/default/121214/babydeer340.jpg'; 

img.onload = function() { 
    $('canvas').each(function() { 
     var ctx = this.getContext("2d"); 
     ctx.drawImage(img, 0, 0); 
    }); 
};​ 
</script> 
<div id="container"> 
    <canvas id='fit-to-specified-width-height-with-aspect-ratio'></canvas> 
</div> 

<canvas id='normal'></canvas> 

http://jsfiddle.net/VAXrL/535/

Answer 1

我也希望這種行爲在所有瀏覽器一致的，但它看起來像IE9和幾個其他像對待帆布塊級元素，所以你需要風格的寬度和高度。

由於光柵化，canvas元素必須依賴其大小的硬像素。一種方法是根據圖像的原始尺寸和所需的比例來計算和設置這些像素。

我叉你的jsfiddle：http://jsfiddle.net/cbosco/ttU5L/3/

var img = new Image(); 

var SCALE = 0.25; 

img.onload = function() { 
    $('canvas').each(function() { 
     var w = img.width; 
     var h = img.height; 
     w *= SCALE; 
     h *= SCALE;   

     this.width = w; 
     this.height = h; 
     var ctx = this.getContext("2d"); 
     ctx.scale(SCALE, SCALE); 
     ctx.drawImage(img, 0, 0); 

    }); 
}; 

// good idea to set src attribute AFTER the onload handler is attached    
img.src = 'http://l.yimg.com/dh/ap/default/121214/babydeer340.jpg'; 
​