JS获取图片大小

Fetch请求远程图片，然后从返回结果中获取大小

import img from '../assets/11.jpg'
console.log(img)
fetch(img)
  .then((response) => response.blob())
  .then((blob) => {
    console.log(blob)
  })
  .catch((err) => console.error(err));

技术拓展

webpack加载图片

import img from '../assets/11.jpg'' 将会处理图像，将其添加到 output 目录，并且 img 变量将包含该图像在处理后的最终的 url。

Response.blob()

Response实现了Body接口，所以以下Body的方法同样可用。

Body.blob()

读取Response对象并且将它设置为已读（因为Response对象被设置为了stream的方式，所以它们只能被读取一次）

返回一个被解析为Blob格式的Promise对象。

Blob

Blob对象表示一个不可变，原始数据的类文件对象。

Blob.size(只读)

Blob对象中所包含数据的大小（字节）。

Blob.type（只读）

一个字符串，表示该Blob对象所包含数据的MIME类型。

如果类型未知，则该值为空字符串

Blob.slice() 返回一个新的Blob对象，包含了源Blob对象中指定范围内的数据
MIME类型
MIME（多用途互联网邮件扩展）是一种用于描述除ASCII文件以外的其他格式文档的标准。

例如音频、视频和图像。

最初用于电子邮件附件，现已成为用于在任何地方定义文档类型的事实标准。

MIME类型列表https://www.iana.org/assignments/media-types/media-types.xhtml

Data URL

Data URL，即前缀为data:协议的URL，其允许内容创建者向文档中嵌入小文件。它们之前被称作“data URL”，直到这个名字被WHATWG弃用。

Data URL有四部分组成：

前缀（data:）

表示数据类型的MIME类型

如果非文本则为可选的base64标记

数据本身

data:[<mediatype>][;base64],<data>

atob(）、btoa()
atob()函数会对经过Base64编码的字符串解析解码

btoa()方法编码可能会在传输过程中出现问题的数据

ArrayBuffer
ArrayBuffer对象用来表示通用的原始二进制数据缓冲区

它是一个字节数组，通常在其他语言中称为“byte array”

ArrayBuffer.prototype.byteLength ArrayBuffer的大小，以字节为单位。

图像编码

图片有很多个小方块组成，每个小方块都有一个自己的颜色，这个颜色是单一的。

像素

图片的像素是图像的最小单位，通常以像素（pixel）来表示。

每个像素都是图像中的一个小方块

分辨率

图片分辨率是指图像中包含的像素数量，通常以水平像素数和垂直像素数表示。

分辨率决定了图像的清晰度和细节水平。