2

私は新しいプロジェクトに取り組んでおり、さまざまな Web サイトから写真を撮っています。

問題は、写真を撮るときに 404 エラー ステータスになることがあることです。これらの画像を DOM から削除したため、リンクが壊れていても問題はありませんが、一部の Web サイトでは壊れた画像がデフォルトの画像に置き換えられています (次のように: http://p.twimg.com/Axm3Vs-CQAEwfAj.jpg:大）

唯一の情報は、次のようなログのエラーです: リソースの読み込みに失敗しました: サーバーは 404 (見つかりません) のステータスで応答しました。

私のために解決策を持っている人はいますか？

壊れた画像を検出するための私のコードがあります:

$('img').error(function(){
    $(this).hide().parents('a').parents('li').remove();
});

前もって感謝します ！

4

2 に答える 2

2

それは本当に大変です。これが私が考えることができる最善の解決策です。

ステップ 1:さまざまな画像ソースから、遭遇するすべての 404 置換画像をダウンロードします。これらの画像を base64 文字列に変換し、それらの文字列を js の配列に格納します。

ステップ 2:仮想キャンバス タグを使用してダウンロードした画像を base64 文字列に変換する: javascript を使用して画像を base64 文字列に変換する方法

ステップ 3: 404 イメージの base64 配列をループして、ダウンロードしたイメージの base64 文字列が配列内のいずれかと一致するかどうかをテストします。画像のトリガー「エラー」が jQuery と一致する場合は、既存の.errorスクリプトを再利用します。

于 2012-07-12T20:30:28.137 に答える
1

問題には（提供されているものと比較して）より単純な解決策がありますが、サーバー側のコードが必要です（最後に説明されています）。したがって、JS は次のようになります。

$("img").each(function()
{
    // Check each target image and try to resolve its src
    $.ajax(
    {
        url: $(this)[0].src,
        type: "get",
        context: $(this),
        error: function()
        {
            // Delete on error (404)
            $(this).remove();
            console.log("ERR!");
        },
        success: function(data)
        {
            // It's OK!
            console.log("YEAH!");
        }
    });
});

クロスドメイン リクエストが許可されていないため、サーバー経由で画像コンテンツを渡す簡単なプロキシ スクリプトを作成する必要があります。

例:元のヘッダーを含む画像yoursite.com/imageproxy?src=http://p.twimg.com/Axm3Vs-CQAEwfAj.jpg:largeのコンテンツを返します。http://p.twimg.com/Axm3Vs-CQAEwfAj.jpg:large

アップデート：

@Fresheyeballの回答に対するコメントの例として：

色比較

更新 2:

また、 brain.jsを使用してニューラル ネットワークをトレーニングできると思います。これは、後で色と比較するのに役立ちます。しかし...

画像用の 4 文字列プロキシを作成する方が簡単かもしれません (もちろん、無制限の帯域幅がある場合)。

于 2012-07-12T21:09:09.573 に答える