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);
});

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

jsfiddle

Answer 1

尝试使用 naturalWidth/naturalHeight 代替宽度/高度。

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

jsfiddle