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有四部分组成:
  1. 前缀(data:)
  2. 表示数据类型的MIME类型
  3. 如果非文本则为可选的base64标记
  4. 数据本身
data:[][;base64],

atob()、btoa()

  • atob()函数会对经过Base64编码的字符串解析解码
  • btoa()方法编码可能会在传输过程中出现问题的数据

ArrayBuffer

  • ArrayBuffer对象用来表示通用的原始二进制数据缓冲区
  • 它是一个字节数组,通常在其他语言中称为“byte array”
  • ArrayBuffer.prototype.byteLength ArrayBuffer的大小,以字节为单位。

图像编码

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

像素

  • 图片的像素是图像的最小单位,通常以像素(pixel)来表示。
  • 每个像素都是图像中的一个小方块

分辨率

  • 图片分辨率是指图像中包含的像素数量,通常以水平像素数和垂直像素数表示。
  • 分辨率决定了图像的清晰度和细节水平。

方式二、XMLHttpRequest请求远程图片,然后从返回结果中获取大小

function load(url) {
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob'
    xhr.onload =  function(res) {
    }
    xhr.open("GET", url, true);
    xhr.send("");
}

XMLHttpRequest.responseType

  • "" 空的responseType字符串与默认类型“text”相同。

  • arraybuffer

  • blob

  • document

  • json

  • ms-stream 仅受IE支持

将 responseType 设置为特定值时,作者应确保服务器实际发送的响应与该格式兼容。如果服务器返回的数据与设置的 responseType 不兼容,则 response 的值将为null .

延伸:uniapp获取图片大小

设置responseType: 'arraybuffer'

uni.request({
      url: file.path, 
      responseType: 'arraybuffer',
      success: (res: any) => {
          if (res.statusCode === 200) {
            file.size = res.data.byteLength
          }
          resolve(true)
      }
    });


这是一个从 https://juejin.cn/post/7369153643391221801 下的原始话题分离的讨论话题