Viewer.js 开源项目教程

邵玫婷

于 2024-08-09 07:18:20 发布

阅读量769

点赞数 6

本文链接：https://blog.csdn.net/gitblog_00674/article/details/141043321

版权

Viewer.js 开源项目教程

viewer⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-viewer项目地址:https://gitcode.com/gh_mirrors/vie/viewer

项目介绍

Viewer.js 是一个强大的 JavaScript 图像查看器库，由 Fengyuan Chen 开发并维护。它允许用户在网页上以交互方式查看图像，支持缩放、旋转、拖动等操作。Viewer.js 兼容主流浏览器，并且易于集成到任何 web 项目中。

项目快速启动

安装

你可以通过 npm 或直接下载源码来安装 Viewer.js。

通过 npm 安装：

npm install viewerjs

引入

在你的 HTML 文件中引入 Viewer.js：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Viewer.js 示例</title>
  <link rel="stylesheet" href="path/to/viewer.css">
</head>
<body>
  <img id="image" src="path/to/image.jpg" alt="图片">

  <script src="path/to/viewer.js"></script>
  <script>
    const image = document.getElementById('image');
    const viewer = new Viewer(image, {
      inline: true,
      viewed() {
        viewer.zoomTo(1);
      },
    });
  </script>
</body>
</html>