在前端开发中，图片不仅是页面内容的重要组成部分，也是网站信息传递的重要载体，同时也是影响用户体验的重要因素之一。而在展示图片的过程中，图片的大小(尺寸)也是需要考虑的因素之一。
在开发中，如果需要实现图片的放大或缩小功能，那么可以使用 npm 包 "enlargeimg"，它是一个原生 JavaScript 编写的图片放大缩小工具，使用极为简单，可更好的提升用户体验。
安装 enlargeimg
要使用 enlargeimg，你需要先使用 npm 进行安装：
--- ------- ---------- ------
安装完毕后，你就可以在项目中使用 enlargeimg 了。
使用 enlargeimg
enlargeimg 提供了两种使用方式：
1. 作为模块使用
可以通过 ES6 的 import 语法，将 enlargeimg 作为模块引入到项目中：
------ ---------------- ---- -------------
接着，你需要实例化并使用 createEnlargeImg 函数：
----- ------------ - ------------------- -- -- ------- -- ------------------------------- -----------
其中，targetImg 参数为图片的 DOM 节点，zoomLevel 参数为放大倍数。比如，将图片放大 1 倍：
------------------------------- ---
2. 直接引入
在 HTML 文件中直接使用 enlargeimg，可以通过在 <head> 标签中引入 enlargeimg 的 js 文件，然后在页面中调用相应方法：
--------- -----
------
------
--------- ------------------
----- ----------------
------- ------------------------------------------------------------
-------
------
---- ----------------- ------------------------- --- ---------
--------
-------- --------------------- ---------- -
----------------------------- -----------
-
---------
-------
-------其中，EnlargeImg.enlarge() 方法接受两个参数：targetImg 和 zoomLevel。targetImg 参数为被点击的图片元素，zoomLevel 参数为放大倍数。在上述示例中，图片被点击后将放大 2 倍。
示例代码
HTML 中，使用 enlargeimg：
--------- -----
------
------
----- ----------------
--------- ------------------
------- ------------------------------------------------------------
-------
--- -
------ ------
-
--------
-------
------
---- ----------------- ------------------------- --- ---------
--------
-------- --------------------- ---------- -
----------------------------- -----------
-
---------
-------
-------使用图片展示业务的 React 组件：
------ ----- ---- --------
------ --------- ---- -------------
------ ----------------- ---- -------------
----- ---------- ------- --------------- -
------ --------- - -
---- ----------------------------
---- ----------------------------
--
----------- ------- -
-------------
---------- - -
---------- --
--
---------------- - --------------------
----------------- - -----------------------------
------------------ - ------------------------------
-
----------------- -- -
-------------------------------------- -- -- -
-------------------------------------- ----------------------
---
-
------------ -- -
----------------------- -- -- ---------- ------------------- - -- ----
-
------------- -- -
----------------------- -- -- ---------- ------------------- - -- ----
-
------ -- -
----- - ---- --- - - -----------
----- - --------- - - -----------
------ -
-----
----
---------
---------
-------------- -- - ------------ - -------- --
-------- ------ ------- --------- --- --
--
-----
----------- -------------------
------- --------------------------------------
------- ---------------------------------------
------
------
--
-
-
------ ------- -----------在以上代码中，我们使用回调函数在组件挂载时添加事件监听器，当图片被点击时启动 enlargeimg 工具进行放大操作。
如何优化 enlargeimg 的性能
由于 enlargeimg 是通过对图片进行 clone 实现放大缩小的效果，因此在大量使用或是图片太大或是分辨率过高的情况下会造成一定的性能问题。如果你需要展示大量的图片，可以将图片的分辨率进行压缩，或是提前对图片进行缩略处理。如果你有条件，也可以考虑使用基于 canvas 的图片放大缩小方案。
小结
enlargeimg 是一个原生 JavaScript 编写的图片放大缩小工具，不依赖任何框架，使用简单方便，可更好的提升用户体验。在使用过程中，建议将图片进行合适的压缩和缩略处理，以更好的优化性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066e25a563576b7b1ece82