2012-08-04 1 views
6

キャンバス上のいくつかの画像を変更し、この画像のsrcを新しいBase64のコード化画像に設定します。img.srcの変更後にfirefoxに画像をリロードするように強制する

img.src = changeColor(img); 

changeColorは、base64符号化された画像を返します。

return canvas.toDataURL(); 

ChromeとOperaはSRC変更後のさわやかなイメージですが、Firefoxはしないでください! イメージ要素をFireBugで検査し、新しいsrcと新しいイメージを表示します!

私はすでにURLにデータを追加しようとしましたが、これはURLではなくbase64でコード化されたイメージなので、画像が完全に破損します。

私はイメージを強制的にリロードするか、JavaScript経由でFirefoxのキャッシュを無効にする方法はありますか?

更新: 私はまた、image.src = ''を設定しようとしました。 in changeColor関数。 これはchromeで動作しますが、firefox ...の画像は消えて、新しいbase64値を設定すると再び表示されません。

+1

ポスト紙は、いくつかのコードをしてください。 – Samson

+0

オプションを理解するために関連するコードを見ずには本当に助けになることはできません。 – jfriend00

+0

Base64でコード化されたイメージの場合、イメージが変更されるとbase64データが変更されるため、キャッシュの問題にはなりません。または私は何かを逃していますか?たぶん、イメージのDOM要素を削除して追加することは、あなたが試すことができるものです。 (またはsrcを ""に設定してから実際のデータに設定すると、それが役立つかどうかわかりませんが、試してみる価値があります) – Preli

答えて

0

イメージフォーマットを追加してみてください(そしてjpgを使用してください)。画像を再エンコードする可能性があります。

return canvas.toDataURL('image/jpg'); 
+0

これはほとんどのブラウザで正しく動作しますが、Firefoxでは正しく動作しません。 –

+1

"?"あなたのsrcの最後にある文字列(クエリー文字列の記号)。この場合に役立つかどうかはわかりませんが、FFで同様の問題が発生したときに私が一度私を救ったことを覚えています。 – dmmd

+0

私は試みました... "?"画像データを破壊する。 srcはイメージデータであり、標準のURLではないからです。 –

1

@dmmdと記載されています。ランダムな値でクエリ文字列を追加するだけです。

id.src = "path?t=t"+ Math.random(5); 
+0

これは私のために働いた –

1

Iは、画像データを使用していないが、これは、src変数が変更されなかったときFFがリロードされなかった、同様の問題のために働い:

image.src = ""; 
setTimeout(function(){ 
    image.src = //the new image src 
}, 0); 
関連する問題