Viewer.js 是一款功能强大的 JavaScript 图片查看器，专为现代 Web 应用设计。它支持图片的缩放、平移、旋转、翻转等操作，完美适配各种设备和浏览器。
【免费下载链接】viewerjs JavaScript image viewer. 
项目地址: https://gitcode.com/gh_mirrors/vi/viewerjs
项目概述
Viewer.js 提供了丰富的功能特性：
- 支持53种配置选项
- 提供23种操作方法
- 支持17种事件监听
- 支持模态框和内联两种模式
- 完整的触摸屏支持
- 键盘操作支持
- 跨浏览器兼容
快速开始
安装方式
通过 npm 安装：
npm install viewerjs
在浏览器中直接使用：
<link href="/path/to/viewer.css" rel="stylesheet">
<script src="/path/to/viewer.js"></script>
基础用法
创建图片容器：
<div>
<img id="image" src="picture.jpg" alt="图片描述">
</div>
初始化查看器：
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
const viewer = new Viewer(document.getElementById('image'), {
inline: true,
viewed() {
viewer.zoomTo(1);
},
});
多图展示
对于多张图片的展示：
<div>
<ul id="images">
<li><img src="picture-1.jpg" alt="图片1"></li>
<li><img src="picture-2.jpg" alt="图片2"></li>
<li><img src="picture-3.jpg" alt="图片3"></li>
</ul>
</div>
初始化画廊：
const gallery = new Viewer(document.getElementById('images'));
核心功能详解
配置选项
Viewer.js 提供了丰富的配置选项，让你可以完全自定义查看器的行为：
new Viewer(imageElement, {
backdrop: true,
button: true,
navbar: true,
title: true,
toolbar: true,
className: '',
container: 'body',
filter: null,
fullscreen: true,
keyboard: true,
focus: true,
loading: true,
loop: true,
movable: true,
rotatable: true,
scalable: true,
zoomable: true,
zoomOnTouch: true,
zoomOnWheel: true,
slideOnTouch: true,
toggleOnDblclick: true,
tooltip: true,
transition: true,
zIndex: 2015,
zIndexInline: 0,
zoomRatio: 0.1,
minZoomRatio: 0.01,
maxZoomRatio: 100,
interval: 5000,
minWidth: 200,
minHeight: 100,
});
工具栏自定义
你可以完全自定义工具栏的布局和按钮：
new Viewer(imageElement, {
toolbar: {
zoomIn: 4,
zoomOut: 4,
oneToOne: 4,
reset: 4,
prev: 4,
play: {
show: 4,
size: 'large',
},
next: 4,
rotateLeft: 4,
rotateRight: 4,
flipHorizontal: 4,
flipVertical: 4,
},
});
图片过滤
通过过滤器函数可以控制哪些图片可以被查看：
new Viewer(imageElement, {
filter(image) {
return image.complete;
},
});
操作方法
Viewer.js 提供了完整的 API 来控制图片查看器：
基本操作
// 显示查看器
viewer.show();
// 隐藏查看器
viewer.hide();
// 查看指定索引的图片
viewer.view(1); // 查看第二张图片
// 查看上一张图片
viewer.prev();
// 查看下一张图片
viewer.next();
图片变换
// 移动图片
viewer.move(1); // 向右移动
viewer.move(-1, 0); // 向左移动
viewer.move(0, -1); // 向上移动
viewer.move(0, 1); // 向下移动
// 旋转图片
viewer.rotate(90); // 向右旋转90度
viewer.rotate(-90); // 向左旋转90度
// 缩放图片
viewer.zoom(0.1); // 放大10%
viewer.zoom(-0.1); // 缩小10%
事件系统
Viewer.js 提供了完整的事件系统，让你可以监听查看器的各种状态变化：
生命周期事件
new Viewer(imageElement, {
ready() {
console.log('查看器准备就绪');
},
shown() {
console.log('查看器已显示');
},
viewed() {
console.log('图片已查看');
this.viewer.zoomTo(1).rotateTo(180);
},
});
操作事件
imageElement.addEventListener('viewed', function () {
console.log('图片查看完成');
});
实际应用案例
自定义标题
Viewer.js 自定义标题功能展示
动态查看器
动态加载和更新图片查看器
移动范围限制
限制图片移动范围的功能演示
模态框中的查看器
在 Bootstrap 模态框中集成 Viewer.js
键盘支持
在模态模式下，Viewer.js 提供了完整的键盘操作支持：
Esc: 退出全屏或关闭查看器Space: 停止播放Tab: 切换按钮焦点Enter: 触发按钮点击←: 查看上一张图片→: 查看下一张图片↑: 放大图片↓: 缩小图片Ctrl + 0: 缩放到初始大小Ctrl + 1: 缩放到自然大小
性能优化建议
图片懒加载
对于大型图片库，建议实现懒加载机制：
new Viewer(imageElement, {
filter(image) {
return image.dataset.loaded === 'true';
},
});
响应式设计
Viewer.js 天然支持响应式设计，确保在各种设备上都有良好的用户体验。
项目结构
Viewer.js 的项目结构清晰，主要文件分布在以下目录：
src/: 源代码目录js/: JavaScript 模块css/: 样式文件
dist/: 构建输出文件docs/: 文档和示例test/: 测试文件
开发与构建
构建命令
# 构建 CSS 和 JavaScript
npm run build
# 清理构建文件
npm run clean
# 压缩文件
npm run compress
# 运行测试
npm test
开发环境
启动开发环境，实时监听文件变化：
npm start
总结
Viewer.js 是一个功能完整、性能优秀的图片查看器解决方案。通过灵活的配置选项和丰富的 API，它可以满足各种复杂的图片展示需求。无论是简单的单图查看，还是复杂的多图画廊，Viewer.js 都能提供专业的用户体验。
通过本指南，你已经掌握了 Viewer.js 的核心概念和使用方法。现在就可以在你的项目中集成这款强大的图片查看工具，为用户带来更好的图片浏览体验。
【免费下载链接】viewerjs JavaScript image viewer. 项目地址: https://gitcode.com/gh_mirrors/vi/viewerjs
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
