Question

好吧，我让this question向我展示了使用裁剪和画布的一些方向。

在那段时间一切正常，因为我不打算支持互联网浏览器，但是，现在，它应该得到支持。

所以，我不知道为什么，但在我看来问题是因为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

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

1 个答案: