在前端开发中，经常会遇到需要对图片进行压缩或调整大小的问题。为了方便开发者，npm 上有很多相关的包可以使用，其中 ng7-pica 是一个比较优秀的图片处理工具。
安装 ng7-pica
首先，我们需要安装 ng7-pica。在命令行中执行下面的命令即可：
--- ------- -------- ------
使用 ng7-pica
ng7-pica 由两个主要的方法组成，它们分别是：
resizeImage()：调整图片大小compressImage()：压缩图片文件大小
下面我们来详细介绍这两个方法的使用。
调整图片大小
调整图片大小主要是通过 resizeImage() 方法实现的。下面是一个调整图片大小的示例：
------ - --------- - ---- ----------------
------ - -- ---- ---- -----------
------------
--------- -----------
--------- -
-----------------
---- ------- -------- -----
---- ------- ------- -----
--
--
------ ----- ------------ -
--------- ------ - ----------------------------------
-------- -------
------------------- ----- ----- --
---------- -
----------------------
--------------
----
----
-------------------------
------------ ------- -- ------------ - ----------
--
-
-代码解释：
Pica是我们从 ng7-pica 包中导入的模块。original是原始图片的 URL。resized是调整大小后的图片 URL，后面通过调用resizeImage()方法来实现。constructor中注入Pica实例。ngOnInit()中调用了resizeImage()方法来调整图片大小。其中，前三个参数分别是原始图片 URI、宽度和高度，第四个参数是调整图片的模式，最后一个参数则是回调函数，调用成功后将调整后的图片 URL 通过该回调函数返回。
当然，resizeImage() 的调用还有其它可选参数，请参考 ng7-pica 的文档。
压缩图片文件大小
压缩图片文件大小可以通过 compressImage() 方法来实现。下面是一个使用 compressImage() 方法进行图片压缩的示例：
------ - --------- - ---- ----------------
------ - -- ---- ---- -----------
------------
--------- -----------
--------- -
-----------------
---- ------- -------- -----
------- -------------------------------------
---- ------- ---------- -----
--
--
------ ----- ------------ -
--------- ------ - ----------------------------------
----------- -------
------------------- ----- ----- --
--------------- -
------------------------
--------------
----
--------------- ------- -- --------------- - -------------
--
-
-代码解释：
Pica是我们从 ng7-pica 包中导入的模块。original是原始图片的 URL。compressed是压缩后的图片 URL。constructor中注入Pica实例。compressImage()方法的第一个参数是原始图片 URI，第二个参数是压缩质量，取值范围为 0 - 1，1 表示最高质量，0 表示最低质量。compressImage()方法的最后一个参数则是回调函数，调用成功后将压缩后的图片 URL 通过该回调函数返回。
同样地，compressImage() 方法的调用还有其它可选参数，请参考 ng7-pica 的文档。
总结
ng7-pica 是一个非常有用的前端图片处理工具，能够帮助开发者快速实现图片的调整大小和压缩功能。希望这篇文章能够帮助读者更好地了解 ng7-pica 的使用方法和注意事项，进一步提升前端开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671d630d0927023822be5