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/

4

1 に答える 1

0

私もこの動作がすべてのブラウザで一貫していることを望みますが、IE9と他のいくつかのブラウザはキャンバスをブロックレベルの要素のように扱っているように見えるので、幅と高さの両方をスタイル設定する必要があります。

キャンバス要素はラスタライズされているため、サイズがハードピクセルに依存する必要があります。1つのアプローチは、画像の元のサイズと目的のスケールに基づいてこれらのピクセルを計算して設定することです。

私はあなたの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';
​
于 2012-12-17T16:42:46.393 に答える