Nobodyasidentity.github.io/imgview.html at main · Nobodyasidentity/Nobodyasidentity.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Viewer - Nobody</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/files/icon.png?">
<style>
  html,body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #111;
  }
  #container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  #panzoom {
    width: fit-content;
    height: fit-content;
    transform-origin: 0 0;
  }
  img {
    display: block;
    user-select: none;
    pointer-events: none;
  }
  #ui {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
  }
  #ui button {
    background: #222;
    color: #fff;
    border: 1px solid #444;
    padding: 6px 10px;
    margin-left: 4px;
    cursor: pointer;
  }
</style>
</head>
<body>
<div id="container">
  <div id="panzoom">
    <img id="image" alt="">
  </div>
  <div id="ui">
    <button id="zoomIn">+</button>
    <button id="zoomOut">−</button>
    <button id="reset">Reset</button>
  </div>
</div>
  <script src="/files/panzoom.js"></script>
<script>
  const src = location.hash.slice(1);
  if(!src){
    document.body.innerHTML = '<p style="color:white;padding:1rem">No image specified</p>';
    throw new Error('No image src');
  }

  const container = document.getElementById('container');
  const panzoomEl = document.getElementById('panzoom');
  const img = document.getElementById('image');
  img.src = src;
  img.onload = () => {
    const cw = container.clientWidth;
    const ch = container.clientHeight;
    const iw = img.naturalWidth;
    const ih = img.naturalHeight;

    const fitScale = Math.min(cw / iw, ch / ih);

    const panzoom = Panzoom(panzoomEl, {
      maxScale: 100,
      minScale: fitScale,
      contain: 'outside'
    });

    panzoom.zoom(fitScale, { animate: false });

    const scaledWidth = iw * fitScale;
    const scaledHeight = ih * fitScale;

    let offsetX = 0;
    let offsetY = 0;

    if (scaledWidth < cw) offsetX = (cw - scaledWidth) / 2;
    if (scaledHeight < ch) offsetY = (ch - scaledHeight) / 2;

    panzoom.pan(offsetX, offsetY, { animate: false });
    container.addEventListener('wheel', panzoom.zoomWithWheel);
    const zoomIn = document.getElementById('zoomIn');
    const zoomOut = document.getElementById('zoomOut');
    const reset = document.getElementById('reset');

    if (zoomIn) zoomIn.onclick = () => panzoom.zoomIn();
    if (zoomOut) zoomOut.onclick = () => panzoom.zoomOut();
    if (reset) reset.onclick = () => {
      panzoom.zoom(fitScale);
      panzoom.pan(offsetX, offsetY);
    };
  };
</script>
</body>
</html>