javascript - 元の画像サイズを取得して、キャンバス IE でトリミングおよびプレビューする

Question

さて、私はこの質問を作成して、切り抜きとキャンバスの操作に関するいくつかの指示を示しました。

Internet Explorer をサポートするつもりはなかったので、当時はすべて問題なく動作していましたが、現在はサポートされているはずです。

理由はわかりませんが、問題はIEが元の画像サイズを取得していないためだと思われます。

chrome、ff、opera、safari ではすべて正常に動作します。IE は、いくつかの問題を示す唯一のものです。切り抜きキャンバスの結果は、画像から切り抜かれた領域と等しくありません。

トリミングされた画像を描画するためのメインコードは次のとおりです

$("#crop").on("click", function(){
    var canvas = document.getElementById("canvasThumbResult");
    var context = canvas.getContext("2d");
    var img = document.getElementById("canvasToThumb"),
        $img = $(img),
        imgW = img.width, // chrome, ff... show as 1498, ie not
        imgH = img.height; // chrome, ff... show as 855, ie not

    var ratioY = imgH / $img.height(),
        ratioX = imgW / $img.width();

    var getX = $('#x').val() * ratioX,
        getY = $('#y').val() * ratioY,
        getWidth = $('#w').val() * ratioX,
        getHeight = $('#h').val() * ratioY;

    context.drawImage(img,getX,getY,getWidth,getHeight,0,0,320,320);
});

問題を確認するには、これを次のように実行します。

jsfiddle