npm 包 iviewer 使用教程

在前端开发中，我们经常需要对图片进行处理和展示。而 iviewer 是一个功能强大的 jQuery 插件，可以让我们轻松地实现图片缩放、旋转、拖拽等操作。本文将详细介绍如何使用 npm 包 iviewer，并提供相关示例代码以帮助读者更好地掌握技能。

安装 iviewer

使用 npm 工具安装 iviewer：

npm install iviewer --save

安装完成后，在需要使用 iviewer 的页面中引入 jQuery 和 iviewer：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./node_modules/iviewer/dist/iviewer.min.js"></script>
<link rel="stylesheet" href="./node_modules/iviewer/dist/iviewer.min.css">

基本用法

在 HTML 页面中添加一个 img 标签，并为其设置 id 属性：

<img id="myImg" src="./example.jpg" width="500" height="333">

然后在 JavaScript 中调用 iviewer 函数，对图片进行配置并初始化：

$('#myImg').iviewer({
  zoom_min: 0.1,
  zoom_max: 10,
  zoom_current: 1,
  mousewheel: true,
  wheel_speed: 50,
});

这里的配置项有：

• zoom_min：最小缩放比例，默认为 0.1
• zoom_max：最大缩放比例，默认为 10
• zoom_current：当前缩放比例，默认为 1
• mousewheel：是否开启鼠标滚轮缩放，默认为 true
• wheel_speed：鼠标滚轮缩放速度，默认为 50

图片旋转

使用 iviewer 可以方便地实现图片旋转功能。我们可以在 JavaScript 中添加如下代码，使用户点击旋转按钮时触发旋转操作：

$('#rotateLeftBtn').on('click', function() {
  $('#myImg').iviewer('angle', -90);
});

$('#rotateRightBtn').on('click', function() {
  $('#myImg').iviewer('angle', 90);
});

这里的 rotateLeftBtn 和 rotateRightBtn 分别是旋转左、右按钮的 id。

拖拽功能

iviewer 还提供了拖拽功能，让用户可以通过鼠标拖拽图片进行移动。我们可以在 JavaScript 中添加如下代码，开启拖拽功能：

$('#myImg').iviewer('set_drag', true);

高级功能

除了基本用法之外，iviewer 还提供了一些高级功能，如添加水印、设置背景等。这里不再赘述，读者可以自行查阅官方文档。

总结

本文介绍了 npm 包 iviewer 的使用方法，并提供了相关示例代码。通过学习本文，读者可以轻松掌握 iviewer 的基本用法，并快速实现图片的缩放、旋转和拖拽等功能。

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