9

ランダムに生成された画像のクローンを作成しようとしています。まったく同じURLを使用していますが、別の画像が読み込まれています。（クロームとFirefoxでテスト済み）

イメージサーバーを変更できないので、純粋なjavascript/jQueryソリューションを探しています。

ブラウザに最初の画像を再利用させるにはどうすればよいですか？

Firefox： Firefoxデモ

クロム： Chromeデモ

自分で試してみてください（表示するには、数回リロードする必要があるかもしれません）

コード： http： //jsfiddle.net/TRUbK/

$("<img/>").attr('src', img_src)
$("<div/>").css('background', background)
$("#source").clone()

デモ： http： //jsfiddle.net/TRUbK/embedded/result/

4

8 に答える 8

6

イメージサーバーが自分のものでない場合は変更できませんが、自分のサーバーに簡単に何かを書き込んで処理することはできます。

まず、選択したサーバー側の言語（PHP、ASP.NETなど）で次のようなものを記述します。

  1. http://a.random-image.net/handler.aspx?username=chaosdragon&randomizername=goat&random=292.3402&fromrandomrandomizer=yesを押して、ダウンロードします。2つの方法のいずれかでキーを生成します。全体のハッシュを取得するか（MD5は問題ないはずです。セキュリティ関連の使用ではないので、最近は弱すぎるのではないかと心配しています）。または、画像のサイズを取得します。後者の場合、重複がいくつかある可能性がありますが、作成は高速です。
  2. 画像がまだ保存されていない場合は、そのキーをファイル名の一部として使用し、コンテンツタイプを別の部分として使用する場所に画像を保存します（JPEGとPNGが混在している場合）
  3. 次のステージのURIを使用してXMLまたはJSON応答で応答します。

クライアントサイドコードでは、XmlHttpRequestを介してそのURIをヒットし、画像で使用するURIを取得します。新しいランダムなものが必要な場合は、その最初のURIをもう一度ヒットし、2つ以上の場所で同じ画像が必要な場合は、同じ結果を使用します。

そのURIhttp://yourserver/storedRandImage?id=XXXは、XXXがキーである場所（上記で決定されたハッシュまたはサイズ）のようなものにヒットします。そのためのハンドラーは、保存されている画像のコピーを検索し、正しいコンテンツタイプでファイルを応答ストリームに送信します。

これはすべて技術的には非常に簡単ですが、考えられる問題は法的な問題です。画像のコピーを別のサーバーに保存しているため、ランダムな画像を送信するサービスとの契約条件の範囲外になる可能性があります。

于 2012-08-16T09:14:10.273 に答える
1

2つの回避策があるようです。

  1. Canvasメソッドを使用する場合は、画像をCanvas自体にロードして、画像に対して2番目のhttpリクエストを行う代わりに、画像データを直接操作できるかどうかを確認してください。画像データを2番目のキャンバスに直接フィードできます。
  2. プロキシを構築する場合は、プロキシにNo-Cacheディレクティブを削除させて、ブラウザによる後続のリクエストでキャッシュを使用できるようにすることができます（ここでの保証はありません-ブラウザ/ユーザーの設定によって異なります）。
于 2012-08-22T12:09:00.383 に答える
1

ランダム画像ジェネレータスクリプトから送信されるヘッダーにCache-Control: max-age=0は、本質的にブラウザに画像をキャッシュしないように指示する宣言が含まれています。

結果をキャッシュする場合は、適切なキャッシュヘッダーを送信するように画像ジェネレータスクリプト/サーバーを変更する必要があります。

また、URLが同じままであることを確認する必要があります（渡されるパラメーターが大量にあったため、その側面は調べませんでした）。

于 2012-08-10T18:57:55.450 に答える
1

まず、Web上で何でも「強制」できます。あなたが物事を強制する必要があるなら、ウェブ開発はあなたにとって間違った媒体です。

試すことができるのは、canvas要素を使用して画像をコピーすることです。例については、 https：//developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_imagesを参照してください。

于 2012-08-16T08:42:19.633 に答える
1

画像のbase64表現を保存してみてください。

非表示のdiv/canvasに画像を読み込み、base64で変換します。（キャンバスを非表示にできるかどうか、またはhtml4タグを使用してimgを伝達できるかどうかはわかりません）これで、「文字列化された」画像をCookieに保存し、無制限に使用できるようになりました...

于 2012-08-22T12:01:11.550 に答える
0

ランダムな画像の取得を停止するように指示します。この3番目の置換呼び出しを追加すると、希望どおりに機能するようです。

// Get the canvas element.
var background = ($("#test").css('background-image')),
img_src = background.replace(/^.+\('?"?/, '').replace(/'?"?\).*$/, '').replace(/&fromrandomrandomizer=yes/,'')
于 2012-08-10T19:09:02.790 に答える
0

試す：

var myImg = new Image();
myImg.src = img_src;

次に、必要な場所に「myImg」を追加します。

$(document).append(myImg);
于 2012-08-10T19:17:52.453 に答える
0

私はあなたのフィドラースクリプトでこれを行い、毎回同じ画像を取得しました

#test {
background:url(http://a.random-image.net.nyud.net/handler.aspx?username=chaosdragon&randomizername=goat&random=292.3402&fromrandomrandomizer=yes);
width: 150px;
height: 150px;

}

ドメイン名の後の.nyud.netに注意してください。

于 2012-08-21T21:18:00.387 に答える