简介
ecpl-image-viewer 是一个简单易用的前端图片查看器，可以为图片提供缩放、拖拽和旋转等功能。此外，它还支持使用鼠标和键盘来控制图片的操作，具有良好的交互体验。该 npm 包已经被广泛应用于各种前端项目中。
安装
安装 ecpl-image-viewer 非常简单，只需要在您的项目根目录中运行以下命令：
npm install ecpl-image-viewer --save
安装成功后，您就可以在项目中使用该包。
使用
安装完成后，需要在代码中引入该包：
import ImageViewer from "ecpl-image-viewer";
引入成功后，您就可以在代码中使用 ImageViewer 了。下面是一个简单的示例：
<img id="image" src="path/to/image.jpg" />
<script>
const imageViewer = new ImageViewer(document.getElementById("image"));
imageViewer.enable();
</script>在上述代码中，使用 document.getElementById("image") 获取了 ID 为 “image” 的 HTML 图片元素，并将其作为参数传递给 ImageViewer 的构造函数。然后，通过 enable() 方法启用 ImageViewer。
可选参数
在使用 ImageViewer 时，可以通过构造函数的第二个参数传递可选参数，以适应不同的需求。下面是可选参数的列表：
zoomStep：缩放步长，默认为0.1。minZoom：最小缩放比例，默认为0.2。maxZoom：最大缩放比例，默认为4。defaultZoom：默认缩放比例，默认为1。clickDelay：鼠标单击时间阈值（单位：毫秒），默认为250。doubleClickDelay：鼠标双击时间阈值（单位：毫秒），默认为300。
可以通过以下方式传递可选参数：
-- -------------------- ---- ------- ----- ------- - - --------- ---- -------- ---- -------- -- ------------ -- ----------- ---- ----------------- --- -- ----- ----------- - --- --------------------------------------------- ---------
方法与事件
除了上述示例中使用的 enable() 方法外，ecpl-image-viewer 还提供了其他一些方法和事件，以方便您更好地控制图片查看器的交互行为。下面是方法和事件的列表：
方法
enable()：启用图片查看器。disable()：禁用图片查看器。reset()：重置图片状态（缩放、位置、旋转）。rotate(deg: number)：旋转图片，deg为旋转角度（正值为顺时针，负值为逆时针）。zoomIn()：放大图片。zoomOut()：缩小图片。zoomTo(scale: number)：缩放到指定比例。move(dx: number, dy: number)：移动图片，dx和dy分别为水平和垂直方向的位移量。
事件
onEnabled()：当启用图片查看器时触发。onDisabled()：当禁用图片查看器时触发。onReset()：当重置图片状态时触发。onRotate(deg: number)：当旋转图片时触发，deg为旋转角度。onZoom(scale: number)：当缩放图片时触发，scale为缩放比例。onMove(dx: number, dy: number)：当移动图片时触发，dx和dy分别为水平和垂直方向的位移量。onFulfilled()：当第一次完全加载图片后触发。onError(msg: string)：当加载图片失败时触发，msg为错误消息。
可以通过以下方式监听事件：
-- -------------------- ---- ------- ----- ----------- - --- ---------------------------------------------- --------------------- - -- -- ----------------------- ---------------------- - -- -- ------------------------ ------------------- - -- -- --------------------- -------------------- - ----- -- --------------------- ----- ------------------ - ------- -- ------------------- ------- ------------------ - ---- --- -- ------------------- --- ---- ----------------------- - -- -- ------------------------- ------------------- - ----- -- -------------------- -----
总结
ecpl-image-viewer 是一个实用的前端图片查看器，使用非常简单，而且还提供了丰富的方法和事件，以供您更好地控制图片展示的交互行为。希望本文对您有所帮助，感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664681e8991b448e25b7