2

我正在做一个新项目，我正在从不同的网站拍照。

问题是当我拍照时，有时会出现404错误状态。如果链接损坏，这不是一个真正的问题，因为我从 DOM 中删除了这些图像，但是某些网站用默认图像替换了损坏的图像（如这里：http://p.twimg.com/Axm3Vs-CQAEwfAj.jpg：大）

唯一的信息是我的日志中出现这样的错误：加载资源失败：服务器响应状态为 404（未找到）。

这里有没有人可以为我提供解决方案？

有我用于检测损坏图像的代码：

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

提前致谢 ！

4

2 回答 2

2

这真的很难。这是我能想到的最佳解决方案。

第一步：从各种图像源下载您将遇到的所有 404 替换图像。将这些图像转换为 base64 字符串，并将这些字符串存储在 js 中的数组中。

第二步：使用虚拟画布标签将下载的图片转换为base64字符串：How to convert image into base64 string using javascript

第三步：遍历 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 回答