npm 包 bpg-extrasquare 使用教程-JavaScript中文网-JavaScript教程资源分享门户

bpg-extrasquare 是一个 npm 包，用于对图片进行支持通道值（alpha）函数的 32x32 以下的 PNG 和 JPEG 图片进行压缩。在前端应用中，经常需要对图片进行压缩，减少图片大小，优化用户体验。而 bpg-extrasquare 通过 JS 实现了图片压缩这一功能，可供在前端项目中使用。

安装及使用

bpg-extrasquare 可以通过 npm 进行安装及使用，使用起来也非常简单方便。

安装

安装命令：

npm install --save bpg-extrasquare

安装成功后，即可在项目中使用该包了。

使用

该包主要提供了以下两个 API：

compress(data, quality[, isPNG[, options]])：压缩函数；
arrayToDataURL(data, isPNG)：生成 base64 url。

下面针对这两个 API 进行讲解。

compress

调用该 API 进行图片压缩，返回压缩后的数据。

参数说明：

data：必填，原始数据，可为 Uint8Array 类型或 ArrayBuffer 类型。
quality: 压缩质量，范围在 0 到 100 之间，值越大压缩后的图片越大。
isPNG: 是否为 PNG 图片类型，可选，默认为 false，代表为 JPEG 格式。
options: 压缩额外选项，可选，格式为 {key1: value1, key2: value2}。

使用示例：

const BPG = require('bpg-extrasquare');

let originData; // 原始图片数据 Uint8Array 或 ArrayBuffer 类型
let quality = 80; // 压缩质量
let isPNG = false;
let options = {};

const compressedData = BPG.compress(originData, quality, isPNG, options);

arrayToDataURL

该 API 将 Uint8Array 类型的数组转化为 base64 url。

参数说明：

data: 必填，原始数据，Uint8Array 类型。
isPNG: 是否为 PNG 图片类型，可选，默认为 false，代表为 JPEG 格式。

使用示例：

const BPG = require('bpg-extrasquare');

let data; // Uint8Array 类型的图片数据
let isPNG = false;

const src = BPG.arrayToDataURL(data, isPNG);

注意事项

该包目前提供的 API 仅支持压缩 32x32 以下的 PNG 和 JPEG 格式图片。
在使用 compress 函数进行图片压缩时，传入的数据类型必须为 Uint8Array 类型或 ArrayBuffer 类型。
待压缩图片尺寸和像素颜色深度都应在 32x32 以下，否则无法使用该包进行压缩。

结语

bpg-extrasquare 是一个非常方便的前端压缩图片的包，其提供的 API 使用也十分简单。通过对该包的学习及使用，我们能够更好地进行前端图片压缩的操作，提高我们应用的性能及用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066c85ccdc64669dde4f12