IE9画布缩放问题。无法保持宽高比以适应容器。

Question

IE9画布缩放问题。无法保持宽高比以适应容器。

3

我似乎无法在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/

- archytect

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Bosco · Answer 1

我也希望所有浏览器都能保持一致的行为，但看起来IE9和其他几个浏览器将canvas视为块级元素，因此您需要同时设置宽度和高度的样式。

由于canvas是光栅化的，所以它的大小必须依赖于硬像素。一种方法是根据图像的原始大小和所需比例计算并设置这些像素。

我fork了你的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';