简介
Browser-img-resize 是一个轻量级的浏览器端图片压缩 npm 包，它使用 JavaScript 编写，能够帮助前端开发人员快速压缩图片，从而提高网站的性能和用户体验。
安装
使用 npm 安装 browser-img-resize：
npm install browser-img-resize --save
使用
Browser-img-resize 提供了一个简单的 API，用于快速压缩图片。下面是 API 的基本用法：
-- -------------------- ---- -------
------ ------ ---- ---------------------
--------
----- ----- -- -------
-------- ---- -- -------- ---
-------- -------- -------- -
-- ---------------- ----- ---- ----
--
------ -------- ----- -
-- ------------- -----
-
---参数
file：上传的文件对象，必须是图片类型。quality：压缩质量，默认是 0.8。success：压缩成功的回调函数，参数是处理后的 Blob 类型数据。error：压缩失败的回调函数，参数是错误信息。
示例
下面是一个实际的使用例子，假设 html 中有一个按钮：
<input type="file" accept="image/*" onchange="handleFileSelect(event)">
然后在 JavaScript 中编写函数：
-- -------------------- ---- -------
-------- ----------------------- -
--- ---- - ----------------------
--------
----- -----
-------- ---- -- -------- ---
-------- -------- -------- -
-- ---------------- ----- ---- ----
--- ------ - --- -------------
-----------------------------
---------------- - ---------- -
--- --- - ------------------------------
------- - --------------
-------------------------------
-
--
------ -------- ----- -
-- ------------- -----
-----------------
-
---
-这个函数就是在用户选择文件后，调用浏览器自带的 FileReader API 将 Blob 类型数据转换为 base64 编码的字符串，然后将字符串传递给 img 的 src 属性，最终在网页中显示压缩后的图片。
总结
Browser-img-resize 是一个非常方便的浏览器端图片压缩工具，它操作简单、使用方便，并且支持各种主流浏览器。使用此工具，可以显著提高网站的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b43c6eb7e50355dbdd4