获取原始图像大小以使用画布 IE 进行裁剪和预览

Question

好吧，我创建了this 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);
});

要查看问题，只需在 ie 上运行：

jsfiddle

Answer 1

尝试使用 naturalWidth/naturalHeight 代替 width/height。

    var img = document.getElementById("canvasToThumb"),
    $img = $(img),
    imgW = img.naturalWidth,
    imgH = img.naturalHeight;

jsfiddle