简介
在前端网页开发中，经常会涉及图片的展示，同时为了用户体验以及页面性能优化的需要，需要在图片加载之前获取图片的大小，以此来进行页面布局设计或者图片的压缩等操作。现在我们才用 npm 包 browser-image-size 来获取图片的大小。
安装
npm install browser-image-size --save
使用
具体步骤
在使用 browser-image-size 之前，需要在前端项目中引入该模块：
const browserImageSize = require('browser-image-size');一旦我们成功引入该模块后，我们首先就可以尝试获取图片的大小了。方法如下：
browserImageSize(imgSrc).then((size) => {
console.log(size.width, size.height); // 获取获取图片的宽高
});其中 imgSrc 就是图片的路径信息。在获取图片宽高之后，我们就可以进行一系列操作，例如调整图片尺寸、裁剪、缩放等等。
案例分析
我这里以一个文字水印效果的图片来进行演示。
图片
下面是一张样例图片：
代码
下面是获取图片尺寸的代码片段：
-- -------------------- ---- -------
----- ------ - -----------------------------------------
------------------------------------ -- -
----- -------- - ---- -- ------
--- ----- - ---------- - ------------ -- -----
-- ------- ----
-- ----------------- - ----- - ---- --- ------ -
---------- - -------------------- ----------
----------- - --------------------- - -------
- ---- -
---------- - ------------------------------- -------- - --------
----------- - --------------------- - -------
-
----- --- - --- --------
-- -------
------- - -------
--------- - -----------
---------- - ------------
-------------------------------
---以上代码逻辑中通过判断图片的长宽比来进行裁剪和缩放图像，从而适配不同尺寸的页面。
总结
通过本篇文章介绍，我们可以学到前端使用 npm 包 browser-image-size 获取图片大小的方法，同时，结合案例分析，我们也学到了如何利用获取图片宽高的数据来进行一系列操作，以此来优化页面性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c88ccdc64669dde50fc