如何检查状态图像javascript加载

Question

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

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

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

这里有人为我提供解决方案吗？

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

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

提前致谢！

Answer 1

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

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

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

第三步：循环遍历404图像base64数组并测试下载图像的base64字符串是否与数组中的任何一个匹配。如果它使用jQuery匹配图像上的触发器“错误”，则可以重用现有的.error脚本。

Answer 2

对于您的问题，有一个更简单的（与提供的比较）解决方案，但它需要一些服务器端代码（最后解释）。因此，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字符串代理更容易（当然，如果有无限的带宽）。