在nexus7上的Firefox中的Canvas转换问题

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上的FF :(

如何解决这个问题？或者这是一个firefox错误？

Answer 1

我有点解决了。

原始图像为jpg，1859px * 1568px~501kb。

我将其调整为50％并且有效！然后我再回到全尺寸图像（仍然无法正常工作），然后一次调整5％。所有图像都失败了，直到我达到原始尺寸的75％（1394px * 1176px~342kb）才能完美运行！

因此，问题是图像大小或文件大小。

快乐狩猎！

<强>更新<！/强>

感谢Edward Falk的评论，我们有一个明确的答案。是的，剃掉图像宽度的单个像素（从而使宽度为偶数个像素）完全解决了这个问题。

Firefox画布要求（某些？）图像具有均匀的像素宽度和高度，否则它们可能无法正确渲染。