Nexus7에서 Firefox의 캔버스 변형 문제

Question

var targetSize = Math.max($(window).width(), $(window).height()); 
var canvas = $("#canvas")[0]; 
canvas.setAttribute('width', $(window).width()); 
canvas.setAttribute('height', $(window).height()); 
var context = canvas.getContext("2d"); 

var img = new Image(); // Create new img element 
img.onload = function() { 
    angle = Math.PI/4; 
    context.setTransform(1, 0, 0, 1, 0, 0); //attempt to reset transform 
    context.drawImage(img, 0, 0); 
}; 
img.src = '../../Images/FloorPlans/GroundFloor.jpg'; // Set source path 

이 코드는 내 nexus7에서 firefox17의 첫 번째 이미지를 만듭니다. 원본 이미지는 각이 지어지지 않고, 모든 선은 남북 및 동서이어야합니다. Firefox 및 바탕 화면의 chrome, 내 nexus7의 chrome에 올바르게 표시됩니다.

은 내가

 context.setTransform(1, 0, Math.tan(angle), 1, 0, 0); 

내가 아래의 두 번째 출력을 얻을 ... "유엔 꼬치"이미지 사용하려고하면! 내 타겟 플랫폼 내가 좀 그것을 밖으로 일을 한 Nexus7 :(이 고정? 또는이 파이어 폭스 버그 수있는 방법

?

Answer 1

에 FF 수 있습니다.

원본 이미지는 JPG했다, 나는 50 % 아래로 크기를 조정하고 일 1859px * 1568px ~ 501킬로바이트

! 그럼 내가 한 번에 5 % 아래로 크기를 조정하기 전에 다시 전체 크기 이미지 (여전히 작동하지 않습니다)에 갔다 모든 이미지가 실패 할 때까지 실패했습니다. 완벽하게 작동 한 원본 크기 (1394px * 1176px ~ 342kb)!

문제는 이미지 크기 또는 파일 크기 중 하나입니다.

해피 헌팅!

업데이트!

아래 에드워드 포크 (Edward Falk)의 의견에 감사 드리며 확실한 답변을드립니다. 네, 이미지 너비의 단일 픽셀을 깎아 내고 (따라서 너비를 짝수 픽셀로 만들면) 문제가 완전히 해결되었습니다.

Firefox 캔버스는 이미지의 너비와 높이가 짝수 픽셀이어야합니다. 그렇지 않으면 잘못 렌더링 될 수 있습니다.