获取原始图像大小裁剪和预览与画布IE

get original image size to crop and preview with canvas IE

本文关键字：IE 图像 原始 裁剪 获取      更新时间：2023-09-26

嗯，我做这个问题是为了告诉我一些使用裁剪和画布的方向。

那时候一切都很好，因为我不打算支持ie，但是，现在，它应该被支持了。

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

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

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

jsfiddle

相关文章：