캔버스로 잘라내어 미리보기 할 원본 이미지 크기를 얻으십시오. IE

Question

글쎄, 나는 작물과 캔버스 작업에 대한 지침을 보여주기 위해 this question을 만들었습니다.

인터넷 익스플로러를 지원하기 위해 노력하지 않았기 때문에 모든 것이 잘 작동하지만 지금은 지원되어야합니다.

그래서, 그 이유는 모르겠지만 그 문제는 그 이유는 IE는 원래 이미지 크기를 얻지 못하기 때문입니다.

크롬, ff, 오페라, 사파리 모두 제대로 작동합니다. 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); 
}); 

을 그릴 수있는 주요 코드, 그냥 예에서이 작업을 실행

jsfiddle

Answer 1

naturalWidth/naturalHeight 대신 폭을 사용해보십시오/신장.

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

jsfiddle