JS获取图片大小

yanessa_yu
881 阅读3分钟

方式一：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类型列表www.iana.org/assignments…

Data URL

  • Data URL，即前缀为data:协议的URL，其允许内容创建者向文档中嵌入小文件。它们之前被称作“data URL”，直到这个名字被WHATWG弃用。
  • Data URL有四部分组成：
  1. 前缀（data:）
  2. 表示数据类型的MIME类型
  3. 如果非文本则为可选的base64标记
  4. 数据本身
data:[<mediatype>][;base64],<data>

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”相同。

image.png

  • arraybuffer

image.png

  • blob

image.png

  • document

image.png

  • json

image.png

  • 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)
      }
    });

 

avatar
文章
阅读
粉丝