使用Javascript检测图像是否损坏

Question

我正在使用Javascript向HTML5画布添加图像：

img = new Image(); 
img.addEventListener('load', loadCallBack, false);
img.src = image_url;

然后loadCallBack绘制图像。

问题是有时image_url指向损坏或不存在的图像。当发生这种情况时，控制台会显示404错误，并且画布上的图像保持为白色。相反，我希望能够用另一个image_url替换图像的src属性。

我尝试了以下操作，但没有成功：

img.addEventListener("error", function(){console.log("404");});

我如何检测图像的404错误？

注意： 我仍在寻找解决方案，因为迄今为止发布的两个解决方案均未奏效。

- LonelyWebCrawler

---

“error”事件似乎可以工作（至少在Chrome中）：http://jsfiddle.net/qgJRF/ - bfavaretto

我已经编辑了标题; Image() JavaScript类在HTML5之前就已经存在了（澄清）。由于您提到了画布，我将HTML5标签保留在您的问题中。 - Christian

但是这听起来像这个问题：https://dev59.com/tHVD5IYBdhLWcg3wGHeu - LonelyWebCrawler

Answer 1

与Kostia答案相同的代码：仅用于比较jQuery的丑陋和纯JavaScript的美丽:

function brokenImage() { ... }

img = new Image();
img.onerror = brokenImage;
img.src = "invalid_img_name.png";​

- Jan Turoň

---

请记住，直接为onerror处理程序赋值将覆盖可能已分配的任何其他错误事件处理程序。 对于简单情况可能不是问题，但大多数情况下最好使用img.addEventListener（“error”...- 然后您必须处理所有与addEventListener相关的跨浏览器问题。 - Mr Speaker

由于MrSpeaker的评论获得了如此多的赞，因此强调它是错误的非常重要：对于我们不拥有的对象（例如在页面上共享所有JavaScript代码的HTMLElement），对onerror属性的关注是有意义的。在这里，我们拥有“img”对象，因此我们可以自由地使用它，这是可以接受的。“大多数情况下更好...”-这不是一个论点，只是模糊的感觉。实际上，该评论是社交跟风反模式的一个很好的例子。 - Jan Turoň

Answer 2

对我来说，在jQuery中可以工作... http://jsfiddle.net/5v2qG/

img = new Image(); 
$(img).bind('error', function () {
      alert('error called');                                                
});
img.src = "invalid_img_name.png";​

- Kostia

---

我正在研究让你们的任一解决方案运作，谢谢。 - LonelyWebCrawler

@LonelyWebCrawler 你在使用jQuery吗？只要在尝试加载图像src之前附加.bind()事件处理程序，它应该可以工作。 - Kostia

啊，我把顺序搞错了。奇怪的是，控制台仍然会输出404消息，但错误函数被调用了。谢谢！ - LonelyWebCrawler

很抱歉取消您的被采纳答案，但这并不像我预期的那样有效。我会进一步研究它。 - LonelyWebCrawler

http://jsfiddle.net/5v2qG/2/ 对我有效。弹出框不会在有效的图像网址上弹出... - Kostia

@LonelyWebCrawler 顺便说一下，是的，控制台会输出404。这是必须的，因为这会触发错误事件。所以逻辑是：404 -> 错误处理程序 -> 将src更改为备用url -> 加载图像。 - Kostia