Viewer.js：零依赖前端图片预览神器，一行代码实现专业级大图查看

标签: 前端 / JavaScript / 图片预览 / 开源工具 / Viewer.js
原文: 微信公众号「web前端智汇堂」https://mp.weixin.qq.com/s/8T3ee21uLV-JzJ18up_dkw
GitHub: https://github.com/fengyuanchen/viewerjs
Demo: https://fengyuanchen.github.io/viewerjs/

核心亮点

Viewer.js —— 纯 JS 实现、零依赖、功能拉满的开源图片查看器，一行代码即可接入专业级大图预览。

最新版本 1.11.7
53 个配置项 + 23 个方法 + 17 个事件
MIT 开源，商用免费
支持 IE9+ 到现代所有浏览器

功能全览

基础交互

单图 / 多图相册预览
模态弹窗 / 内联展示两种模式
放大、缩小、1:1 查看、重置
旋转、左右翻转、上下翻转

高级交互

鼠标滚轮缩放、拖拽移动
移动端触摸缩放、滑动切换
键盘快捷键（ESC 关闭、方向键切换/缩放）
双击切换原图/初始大小
自动轮播、全屏播放

可定制

导航栏、标题、工具栏、遮罩、层级全可控
自定义加载原图 URL（缩略图点开看高清）
过滤不需要预览的图片
自定义标题、按钮、工具栏
监听缩放、旋转、切换、关闭等所有生命周期事件

为什么选 Viewer.js？

1. 真正"零依赖"

维度	很多图片预览插件	Viewer.js
依赖	必须绑 jQuery	无任何依赖
体积	带 CSS + 依赖	只引一个 CSS + 一个 JS
模块化	受限	UMD / CommonJS / ES Module
框架	绑定	Vue、React、原生随便嵌

2. 接入简单到离谱：3 步搞定

第一步：安装

npm install viewerjs

第二步：引样式和 JS

<link rel="stylesheet" href="/dist/viewer.min.css">
<script src="/dist/viewer.min.js"></script>

第三步：一行初始化

// 单个图片
new Viewer(document.getElementById('img'));

// 一组图片（自动识别容器内所有 img）
new Viewer(document.getElementById('image-list'));

完事。点击图片，直接弹出专业级预览器。

3. 功能多却不臃肿

53 个配置项：想改行为？配置项一写就生效
23 个方法：想控制？API 随时调
17 个事件：想二次开发？事件钩子全覆盖

4. 移动端体验拉满

功能	说明
触摸缩放	原生手势支持
滑动切换	上一张/下一张
响应式	导航栏/标题/工具栏按屏幕宽度自动显示/隐藏

手机上点开跟原生 App 一样爽。

5. 维护稳定

MIT 开源，商用完全免费
兼容性稳：IE9+ 都能跑
老项目也能放心集成

真实业务场景

场景	用法
产品详情页	商品图片放大查看细节
相册/照片墙	多图左右切换、轮播演示
后台管理系统	附件图片快速预览
移动端 H5	图片预览不卡顿、不闪退
报表/图表	放大查看图表高清细节
老项目改造	不想引 jQuery，轻量替换旧插件

只要页面有图片需要放大、旋转、切换、预览，Viewer.js 几乎是最优解。

快速开始

npm install viewerjs

<link rel="stylesheet" href="/dist/viewer.min.css">
<script src="/dist/viewer.min.js"></script>

<img id="image" src="picture.jpg">
<script>
  new Viewer(document.getElementById('image'));
</script>