1 
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错误？

在此处输入图像描述

4

1 回答 1

0

我已经搞定了。

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

我将它的大小调整到 50% 并且它起作用了！然后我回到全尺寸图像（仍然无法正常工作），然后一次缩小 5%。所有图像都失败了，直到我达到原始尺寸的 75%（1394px * 1176px ~ 342kb），效果很好！

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

狩猎愉快！

更新！

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

Firefox 画布需要（一些？）图像具有均匀的像素宽度和高度，否则它们可能会不正确地呈现。

于 2013-01-05T17:51:42.490 回答