javascript - 获取原始图像尺寸以使用canvas IE进行裁剪和预览

Question

好吧，我做了 this question向我展示一些使用裁剪和 Canvas 的说明。

当时一切正常，因为我本来不应该支持 Internet Explorer，但是现在应该支持它了。

所以，我不知道为什么，但在我看来，问题是因为 IE 无法获取原始图像大小。

在 chrome、ff、opera、safari 中一切正常。 IE 是唯一显示一些问题的浏览器，裁剪 Canvas 结果不等于图像的裁剪区域。

这是绘制裁剪图像的主要代码

$("#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代替宽度/高度。

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

jsfiddle