是否有可能知道 DOM/JavaScript 图像是否具有 alpha 通道
Is it possible to know if a DOM/JavaScript image has an alpha channel
我在 webgl 中使用图像作为纹理,它需要知道图像的格式,主要是 RGB 或 RGBA。那么给定一个通过 XMLHttpRequest 获取的 Image(),我可以找出它有多少个频道吗?
我意识到我可以 fiddle 通过将其转换为 2D Canvas 然后将其重新格式化为 webgl,但我想避免这种情况。
不,除了绘制到 canvas 并检查每个像素或编写自己的图像加载器并读取 header 和像素
这个问题可以说是无解的,除了少数情况,要检查所有的像素。
JPG 是 RGB,所以如果是 JPG,则没有 alpha。
当然是不是JPG只能根据URL来猜测了。因为即使 URL 是“.jpg”,如果服务器发送 header "Content-Type: image/png",浏览器也会将该文件解释为 PNG。如果您提供了所有文件,那么您就会知道。
如果是 PNG,您可以使用代码读取 header
那会很糟糕,因为您最终会下载文件两次。一次让浏览器将其转换为图像。另一个 XHR 请求以二进制形式下载数据,以便您可以读取 header。也许如果你幸运的话,浏览器只会下载一次并从缓存中提供第二个副本。
但是,即使您这样做了,仅仅因为 header 表示有一个 alpha 通道并不意味着该 alpha 通道的 100% 不是 255 (1.0)。
即使图像有 alpha 通道,它们也不总是用作 alpha 通道。
在 alpha 通道中放置高度贴图或光泽贴图或反射率贴图或发光贴图是很常见的。这是非常具体的应用程序。
如果我是你,我不会尝试查看 alpha 通道。我要么假设所有图像都有 alpha。或者我会让我的艺术家通过文件名或其他元数据明确标记图像的使用方式。
我在 webgl 中使用图像作为纹理,它需要知道图像的格式,主要是 RGB 或 RGBA。那么给定一个通过 XMLHttpRequest 获取的 Image(),我可以找出它有多少个频道吗?
我意识到我可以 fiddle 通过将其转换为 2D Canvas 然后将其重新格式化为 webgl,但我想避免这种情况。
不,除了绘制到 canvas 并检查每个像素或编写自己的图像加载器并读取 header 和像素
这个问题可以说是无解的,除了少数情况,要检查所有的像素。
JPG 是 RGB,所以如果是 JPG,则没有 alpha。
当然是不是JPG只能根据URL来猜测了。因为即使 URL 是“.jpg”,如果服务器发送 header "Content-Type: image/png",浏览器也会将该文件解释为 PNG。如果您提供了所有文件,那么您就会知道。
如果是 PNG,您可以使用代码读取 header
那会很糟糕,因为您最终会下载文件两次。一次让浏览器将其转换为图像。另一个 XHR 请求以二进制形式下载数据,以便您可以读取 header。也许如果你幸运的话,浏览器只会下载一次并从缓存中提供第二个副本。
但是,即使您这样做了,仅仅因为 header 表示有一个 alpha 通道并不意味着该 alpha 通道的 100% 不是 255 (1.0)。
即使图像有 alpha 通道,它们也不总是用作 alpha 通道。
在 alpha 通道中放置高度贴图或光泽贴图或反射率贴图或发光贴图是很常见的。这是非常具体的应用程序。
如果我是你,我不会尝试查看 alpha 通道。我要么假设所有图像都有 alpha。或者我会让我的艺术家通过文件名或其他元数据明确标记图像的使用方式。