1

私のクライアントは、Windows上のFirefox 12で奇妙なバグを経験しています。キャンバスに描かれた画像の周りに、青い色付きのボックスが表示されています。キャンバスは、fancyboxdiv内のiframe内にあります。このサイトのメイン画像の下にある画像のサムネイルをクリックすると、実際の動作を確認できる場合があります：http: //mattmatthias.com/a/index.php?route=product /product&path=20&product_id=80

当初は選択の問題だと思っていましたが、キャンバス全体ではなく、描かれた画像自体が反論しているようです。blurキャンバス、コンテナdiv、iframe ...すべてを何度も試しましたが、役に立ちませんでした。

さらに悪いことに、私はこのバグを再現することができません。MacのSafari、Firefox、Chrome、Operaではすべて正常に機能します。

青い色合い

これは、コードの中で何かを描画する唯一の部分であるため、おそらく問題のあるコードです。

    if(imageWidth == 0) return;

    context.clearRect(0, 0, canvasWidth, canvasHeight);



    var x_adjust = -x-(ratio*canvasWidth    -canvasWidth        )/2;
    var y_adjust = -y-(ratio*canvasHeight   -canvasHeight       )/2;

    var width   = scaledWidth*ratio;
    var height  = scaledHeight*ratio;


    if(x_adjust < canvasWidth - width)
        x_adjust = canvasWidth - width;

    if(x_adjust > 0)
        x_adjust = 0;

    if(y_adjust < canvasHeight - height)
        y_adjust = canvasHeight - height;

    if(y_adjust > 0)
        y_adjust = 0;


    if(width < canvasWidth) {
        x_adjust += (canvasWidth - width) / 2;
    }
    if(height < canvasHeight) {
        y_adjust += (canvasHeight - height) / 2;
    }


    context.drawImage(image, 0, 0,
                      imageWidth, imageHeight,
                      x_adjust, y_adjust,
                      width, height);

何か案は？詳細がわかり次第、こちらに掲載します。

4

1 に答える 1

0

これはキャンバスとは関係ありません。Firefoxで画像を開くだけでも同じことがわかります。したがって、画像の読み取り/レンダリングに問題があります。

このMozillaサポートの問題は、まさにここで起こっていることのように聞こえます。これは、カラーマネジメントの問題に関連しています。

実際、画像ファイルからカラープロファイルを削除すると、画像が正しく表示されます。

特定のケースによっては、プロファイルを削除するだけでなく、変換を実行することもできます。それが必要かどうかは、特定の画像、プロファイル、およびカラーマネジメントがリモートでも訪問者のモニターに意味のあるものを生成する可能性がどれほど大きいかによって異なります（グラフィックデザイナーに対応している場合を除きます：おそらくそれほど大きくはありません）。

于 2012-07-01T18:17:47.473 に答える