Question

在我的网络应用中，我有很多用户使用的网址类型。我的视图显示链接图标或图像预览，具体取决于URL是否指向图像。

显示图片预览的最可靠方式是什么，只有它真的是一张图片？我应该创建<img>并在加载时检查维度，使用new Image()对象，还是其他内容？

任何建议都非常感谢！：）

Answer 1

检查源点是否为有效图像的最可靠和兼容的方法是使用Image对象。如果它可以在图像onload将触发时加载，如果不是onerror将触发：

var img = new Image;
img.onload  = function() { /* OK */ };
img.onerror = function() { /* cannot read this as an image */ };
img.onabort = function() { /* connection or source was reset */ };
img.src = "URLtoCheckHere";

缺点当然是在您发现浏览器是否可以读取和解码之前，将加载整个图像。

如果由于某种原因无法使用Image，您可以通过XHR读取源点，但它有自己的限制，一个是cross-origin resource sharing。如果图像的来源不同（协议，域，端口等），并且外部服务器不允许使用cors，那么读取就会失败。

但是，如果这些限制不是问题（即图像来自与页面相同的服务器或友好的网站），那么您可以将图像的一部分读作ArrayBuffer并检查magic numbers表示您要支持的图像类型。注意字节顺序。

要指定范围，请使用Range header（但不确定服务器是否会尊重它）。

假设文件的一部分已被读入ArrayBuffer：

var reader = new DataView(arrBuffer);

if (reader.getUint32(0) === 0x89504E47 && 
    reader.getUint32(4) === 0x0D0A1A0A) {
  // this seem to be a PNG file
}
else ... etc.

但是，即使将文件检测为有效的图像文件，也无法保证文件不会损坏等等。无法使用此方法验证文件（除非您选择自己编写解析器）。

总而言之，Image是大多数情况下的最佳选择。多年来，它在主浏览器中经历了多次迭代，非常强大且稳定。

使用JavaScript检查图像URL的可靠方法

1 个答案: