webpage/index.html at main · ZhanboShiAI/webpage · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详细技术路线</title>
    <script>
        MathJax = {
          tex: {
            inlineMath: [['$', '$'], ['\\(', '\\)']],
            displayMath: [['$$', '$$'], ['\\[', '\\]']]
          },
          svg: {
            fontCache: 'global'
          }
        };
    </script>
    <script type="text/javascript" id="MathJax-script" async
            src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
    </script>
    <style>
        body {
            font-family: sans-serif;
            line-height: 1.6;
            margin: 40px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            background-color: #ffffff;
            color: #333;
        }
        h1, h2, h3 {
            color: #000000;
        }
        p {
            text-indent: 2em;
        }
        figure {
            margin: 20px 0;
            text-align: center;
        }
        img {
            max-width: 100%;
            height: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
        }
        figcaption {
            margin-top: 10px;
            font-style: italic;
            color: #555;
        }
        #pdf-container canvas {
            /* 让 canvas 宽度适应容器，高度自动缩放 */
            width: 100%;
            height: auto;
            /* margin-bottom: 20px; */
            /* 添加一个细微的边框，使其看起来更像一页纸 */
            /* border: 1px solid #e0e0e0; */
            /* box-sizing: border-box; */
        }
    </style>
</head>
<body>
    <h2>“面向大范围未知场景的多智能体协同定位与联合稠密建图”项目的技术路线详细版本</h2>
    <div id="pdf-container"></div>

    <script src="./statics/pdf/pdf.min.js"></script>
    <script>
        // 指定 PDF.js worker 文件的路径
        pdfjsLib.GlobalWorkerOptions.workerSrc = './statics/pdf/pdf.worker.min.js';

        // PDF 文件路径
        const url = './statics/pdf/info.pdf';

        // 获取用于展示 PDF 的容器
        const container = document.getElementById('pdf-container');

        // 异步加载 PDF
        pdfjsLib.getDocument(url).promise.then(function(pdf) {
            console.log('PDF loaded');

            // 循环遍历每一页
            for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
                pdf.getPage(pageNum).then(function(page) {
                    console.log('Page ' + pageNum + ' loaded');

                    // 获取设备的像素比，用于高分屏适配
                    const devicePixelRatio = window.devicePixelRatio || 1;
                    // 定义一个基础缩放比例，可以根据需要调整以获得更清晰的效果
                    const baseScale = 2.5;
                    // 最终的渲染缩放比例
                    const scale = baseScale * devicePixelRatio;

                    const viewport = page.getViewport({ scale: scale });

                    // 创建 canvas 元素
                    const canvas = document.createElement('canvas');
                    const context = canvas.getContext('2d');

                    // 设置 canvas 的实际尺寸（画布大小），使用渲染后的高分辨率
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    // CSS 样式已在 <style> 标签中定义，这里不再需要设置 style

                    // 将 canvas 添加到容器中
                    container.appendChild(canvas);

                    // 渲染页面到 canvas
                    const renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    page.render(renderContext);
                });
            }
        }, function (reason) {
            // PDF 加载失败
            console.error(reason);
        });
    </script>

</body>
</html>