在 javascript 中验证或读取远程图像类型

Validating or reading a remote image type in javascript

本文关键字：图像 类型 程图像 javascript 验证 读取      更新时间：2023-09-26

这里有一个链接，指向我所说的幻数：文件魔术

如何使用 JavaScript 远程读取文件的前几个字节（幻数）以确定它是否是图像文件？

JavaScript

主要是一种客户端语言，因此您不能简单地以编程方式从自己的页面读取其他站点上托管的文件。 XMLHttpRequest将允许您检索远程数据，但这将检索整个文件，而不是前几个字节。做任何更花哨的事情都需要一个服务器端的助手，例如PHP脚本或类似的东西。

您还应该知道，某些HTTP服务器无论如何都不允许您从输出中检索一定范围的字节 - 它们将始终返回整个文件。因此，即使使用使用 curl 或 wget 的 PHP 脚本，您也可能无法使其适用于所有远程站点：

是否可以使用 Linux 命令从 HTTP 服务器只读前 N 个字节？

（以上内容涵盖了命令行卷曲，但结论广泛适用。

编辑：Sergiu指出，将Range标头添加到XMLHttpRequest中是可行的，至少对于某些服务器是这样（范围标头对于HTTP 1.1是可选的）。但是，跨域图像检索仍然需要进一步的支持，例如CORS。

关于SO还有其他类似的问题。比如这个。
它可能会帮助您将图像读取为二进制数据。

您将需要读取整个图像，而不仅仅是前几个字节。这是 JavaScript 的一个限制。

你可以使用 XMLHttpRequest 来实现这一点：

  • 使用 Range 请求标头指定您只需要几个字节
  • 如果浏览器支持跨源请求，那么您甚至可以请求在其他网站上找到的图像，否则您只能使用您的服务器
  • 如果浏览器足够新，您甚至可以将响应作为 ArrayBuffer 访问，以字节而不是字符的形式访问单个字节

这对我有用：

var request = new XMLHttpRequest();
request.open('GET', '/download/logo.png');
request.setRequestHeader('Range', 'bytes=0-5');
request.responseType = 'arraybuffer'
request.addEventListener('load', function() {
  console.log(new Uint8Array(request.response));
});
request.send();
相关文章：