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);

以下の2番目の出力が得られます！私のターゲット プラットフォームは、Nexus7 の FF でなければなりません :(

これはどのように修正できますか？それとも、これはFirefoxのバグですか？

ここに画像の説明を入力

4

1 に答える 1

0

私はそれをちょっと解決しました。

元の画像は jpg、1859px * 1568px ~ 501kb でした。

サイズを 50% に縮小したところ、うまくいきました。次に、一度に 5% ずつサイズを変更する前に、フル サイズの画像 (まだ機能していません) に戻りました。元のサイズの 75% (1394px * 1176px ~ 342kb) になるまで、すべての画像が失敗しました。

したがって、問題は画像サイズまたはファイルサイズのいずれかです。

ハッピーハンティング！

アップデート！

以下の Edward Falk のコメントのおかげで、決定的な答えが得られました。はい、画像の幅の 1 ピクセルを削る (したがって、幅を偶数のピクセルにする) と、問題は完全に修正されました。

Firefox のキャンバスでは、(いくつかの?) 画像の幅と高さが均一である必要があります。

于 2013-01-05T17:51:42.490 に答える