使用 EaselJS 位图时捕获错误的 URL

Question

在尝试将 URL 加载到 createjs.Bitmap 之前，有没有办法检查 URL 是否指向有效图像？我一直在尝试捕捉错误 URL（在 Firefox 中）的错误，但由于某些原因不起作用。

    try {

        image = new createjs.Bitmap ( "image" );

    } catch ( err ) {

        console.log ( "oops" );
        return null;

    }

当我在 Firefox 中运行这段代码时，错误仍然出现在控制台中，但记录的消息却没有。那么我的问题是，有没有办法预先验证 URL?

Answer 1

如果图像是坏的、未定义的、null 等 - 它不会 throw 一个错误，所以 try/catch 什么都不做。

如果您使用 PreloadJS（CreateJS 套件的一部分）加载图像，您可以监听 error 事件，如果任何图像加载失败（或超时）。

var queue = new createjs.LoadQueue();
queue.on("error", handleError);
queue.loadFile("404image.png");

目前没有仅使用原始 Bitmap 实例来确定是否发生错误的内置方法。通过字符串路径传递给 Bitmap 的图像不会预加载，而只是使用 Image 实例在内部请求。

Answer 2

您可以只使用普通 JS 来检测图像是否可以加载，如果可以，则将该实例传递给 EaselJS Bitmap:

var img = new Image();
img.onload = function() {
    console.log('img loaded');
    var bitmap = new createjs.Bitmap(img);
}
img.onerror = function() {
    console.log('error');
} 
img.src = 'notexistingimage.png';

使用 EaselJS 位图时捕获错误的 URL

Catch bad URLs when using EaselJS bitmap

javascript

error-handling

easeljs