时间戳

首页 > 解决方案 > 在 HTML 画布上加载图像时处理 Image.onerror 中的 404

javascript - 在 HTML 画布上加载图像时处理 Image.onerror 中的 404

问题描述

我编写了一些 Javascript 代码来加载图像（由最终用户上传），如下所示：

var img = new Image;
var ctx = _this.canvas.getContext('2d');
img.onload = function(){
  ctx.drawImage(img, 0, 0, img.width, img.height);
  //do other stuff..    
}
img.onerror = function(event){
  bootbox.alert("Error loading the image!");
}
img.src = Settings.URL + '/images/loadimage/?imageKey=' + imageKey;

imageKey如果对应的图片不存在，服务器返回404响应，其他错误场景也返回500错误。

此代码工作正常，但我想做的是在以下两种不同情况下显示两条不同的消息：

  1. 当我收到 404 响应时。
  2. 当错误 500 响应时。

我无法弄清楚的是 - 如何在img.onerror.

标签： javascripthtml5-canvas

解决方案

onerror方法不提供有关所发生错误类型的任何信息。参考这篇 Stackoverflow 帖子，“image.onerror处理程序将收到一个事件参数，其中不包含有关错误原因的任何信息”。

在这篇博文中，您将找到一些提示如何处理可能不存在的图像的加载。在您的情况下，一个快速的解决方案是使用 XMLHttpRequest 加载图像，您可以在其中访问网络状态：

let imageReq = new XMLHttpRequest();
imageReq.open("GET", Settings.URL + '/images/loadimage/?imageKey=' + imageKey, true);
imageReq.responseType = "blob";

imageReq.onload = function(imageEvent) {
  // the variable below will contain your image as BLOB data
  var blob = imageReq.response;

  let img = new Image;
  let ctx = _this.canvas.getContext('2d');

  img.onload = function() {
    ctx.drawImage(img, 0, 0, img.width, img.height);
    //do other stuff..    
  }

  let urlCreator = window.URL || window.webkitURL;
  let imageUrl = urlCreator.createObjectURL(blob);
  img.src = imageUrl;
};

imageReq.onreadystatechange = function (imageEvent) {  
  if (imageReq.readyState === 4) {  
    if (imageReq.status === 200) {  
      // image has been loaded correctly
    } else if (imageReq.status === 404) {  
      console.log("Image not found");  
    } else if (imageReq.status === 500) {
      console.error("An error occurred:", imageReq.statusText);
    }
  }  
};

imageReq.send(null);

推荐阅读