5 分钟跑起来专业 JavaScript 图片查看器：Viewer.js 零依赖图解库

5 分钟跑起来专业 JavaScript 图片查看器Viewer.js 零依赖图解库【免费下载链接】viewerjsJavaScript image viewer.项目地址: https://gitcode.com/gh_mirrors/vi/viewerjs又要在项目里手写一套拖拽 滚轮缩放 触摸双指缩放的逻辑了Viewer.js 是一个零依赖的 JavaScript 图片查看器把这些交互全做成了现成的——点一下img它就变成可缩放、可旋转、可切换的查看器。压缩后不到 20KB打包体积基本无感。它到底能干什么别背 53 个配置项先看场景和能力的对应关系你的场景Viewer.js 现成的能力电商详情页用户要看清布料纹理滚轮 触摸缩放范围 0.01% ~ 100 倍摄影作品需要换个角度看任意角度旋转 水平/垂直翻转图集连续浏览上一张/下一张、方向键切换、空格键连续播放不想弹窗想嵌在卡片里inline 模式原位置内嵌查看移动端体验触摸缩放、滑动手势每一项都能单独关闭五分钟上手安装命令与 3 行代码安装npm install viewerjs最短可运行代码import Viewer from viewerjs; import viewerjs/dist/viewer.css; new Viewer(document.querySelector(#image), { inline: true });点一下那个#imageJavaScript 图片查看器就跑起来了。23 个方法、17 个事件的完整清单在 README 里不必全记。核心配置怎么调7 个高频选项速查inlinetrue开启页面内嵌默认是弹窗模式。后台管理预览场景常用url查看器取图的来源属性默认src。缩略图页面配url: data-original页面看缩略图、查看器里看原图initialCoverage初始占容器比例默认 0.9。大图想先看到全貌就调低到 0.5maxZoomRatio / minZoomRatio缩放上下限默认 100 和 0.01。文档预览限到 10 就够避免用户放大到看像素zoomOnWheel是否开启滚轮缩放。页面滚动很多时关掉避免和页面滚动打架navbar底部切换条true显示箭头 张数1只显示张数title标题文案支持传数组自定义每张图的标题进阶玩法自定义工具栏与事件钩子自定义工具栏。问题默认按钮不符合业务想加个下载按钮。解法toolbar选项接收对象每个按钮可设 true/false 或自定义函数const viewer new Viewer(galley, { url: data-original, toolbar: { prev() { viewer.prev(true); }, download() { const a document.createElement(a); a.href viewer.image.src; a.click(); }, }, });完整写法参考 docs/examples/custom-toolbar.html。用事件钩子限制移动。问题用户把图拖出容器就找不到了。解法监听move事件偏移超限时调用event.preventDefault()拒绝这一步位移完整示例见 docs/examples/moving-range-limit.html。踩坑提醒4 个高频翻车点⚠️别把原图直接放 src——查看器按url取原图。5MB 大图放 src 里页面会先全量加载把缩略图放 src、原图放 contenteditable="false">【免费下载链接】viewerjsJavaScript image viewer.项目地址: https://gitcode.com/gh_mirrors/vi/viewerjs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考